webpack项目首屏加载优化方案
一、使用CDN优化首屏加载 (以vue-cli3为例)
在Vue项目中，引入到工程中的所有js、css文件，编译时都会被打包进vendor.js，浏览器在加载该文件之后才能开始显示首屏。若是引入的库众多，那么vendor.js文件体积将会相当的大，影响首开的体验。
1.在项目根文件index.html中引入所需js。
2.在vue.config.js中修改配置。
config.externals = {
'vue': 'Vue',
'vue-router': 'VueRouter',
'element-ui':'Element',
'moment':'moment',
'view-design':'iview'
}
3.去掉原有的引用。
去掉import，去掉Vue.use(XXX) 或者下载对应js，css放入本地文件夹。 以绝对路径引入
二、优化chunk-vendors (以vue-cli3为例)
这个优化是两方面的，前端将文件打包成.gz文件，然后通过nginx的配置，让浏览器直接解析.gz文件。
1.compression-webpack-plugin插件打包.gz文件
2.vue.config.js配置插件
config.plugins.push(new CompressionWebpackPlugin({
algorithm: 'gzip',
test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
threshold: 10240,
minRatio: 0.8
}))
3.nginx配置
# gzip config
gzip on;
gzip_min_length 1k;
gzip_comp_level 9;
gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
gzip_vary on;
gzip_disable "MSIE [1-6].";
三、代码优化 uglifyjs-webpack-plugin(以vue-cli3为例)。
1.安装
npm install uglifyjs-webpack-plugin --save
2.使用
在 vue.config.js 文件中进行配置
config.plugins.push(
new UglifyJsPlugin({
sourceMap: false,
parallel: true,
})
)
