- Vue 项目打包以后 vendor.js 体积太大,影响首次加载速度_随遇而安、1314的博客-CSDN博客
- Vue CLI 2&3 下的项目优化实践 —— CDN + Gzip + Prerender_小小木锤的博客-CSDN博客
app.css: 压缩合并后的样式文件
app.js:主要包含项目中的App.vue、main.js、router、store等业务代码
vendor.js:主要包含项目依赖的诸如vuex,axios等第三方库的源码
数字.js:以0、1、2、3等数字开头的js文件,这些文件是各个路由切分出的代码块
mainfest.js:mainfest的英文有清单、名单的意思,该文件包含了加载和处理路由模块的逻辑
bootstrap CDN:https://www.bootcdn.cn
Staticfile CDN:https://www.staticfile.org
jsDelivr CDN:https://www.jsdelivr.com
75 CDN:https://cdn.baomitu.com
UNPKG:https://unpkg.com
cdnjs:https://cdnjs.com
(1)在index.html中 添加所需的第三方库的链接
(2)在webpack.base.conf 中添加 externals,告诉webpack这些第三方库不需要打包
// 引入外部库, 无需webpack打包处理
externals: {
vue:'Vue',
mockjs: 'Mock',
echarts: 'echarts',
ueditor: 'UE',
axios:'axios',
moment:'moment',
'element-ui':'ElementUI'
}
(3)去掉main.js中cdn所引入对应的import
(4)开启gzip压缩
npm install --save-dev [email protected]
(5)修改build文件夹中webpack.prod.conf.js文件,将asset改为filename;
if (config.build.productionGzip) {
const CompressionWebpackPlugin = require('compression-webpack-plugin')
webpackConfig.plugins.push(
new CompressionWebpackPlugin({
// asset: '[path].gz[query]',
filename: '[path].gz[query]',
algorithm: 'gzip',
test: new RegExp(
'\\.(' +
config.build.productionGzipExtensions.join('|') +
')$'
),
threshold: 10240,
minRatio: 0.8
})
)
}
(6)设置config/index.js中productionGzip: true;
build: {
index: path.resolve(__dirname, '../dist/index.html'),
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: './',
productionSourceMap: false,
devtool: '#source-map',
productionGzip: true,// 这里开启Gzip
productionGzipExtensions: ['js', 'css'],
bundleAnalyzerReport: process.env.npm_config_report
}
注意事项:
1、在第一步引入资源时注意 vue.js 必须在 vue-router、vuex、element-ui 之前引入。
2、在第二步修改配置时注意 “element-ui”: “ELEMENT” 是固定写法不能更改。
3、如果 element-ui 采用 cdn 引入的方式,vue 不采用 cdn 引入的方式,这样打包以后打开 dist 下的 index.html 时页面空白报错,必须 vue 和 element-ui 都采用 cdn 引入的方式。