vue打包优化——vendor体积过大
写在前面
在Vue项目中，引入到工程中的所有js、css文件，编译时都会被打包进vendor.js，浏览器在加载该文件之后才能开始显示首屏。若是引入的库众多，那么vendor.js文件体积将会相当的大，影响首开的体验。
一、分析打包文件
首先引入webpack-bundle-analyzer插件，分析打包后的vendor
-
安装
npm install webpack-bundle-analyzer --save-dev
优化前分析
打包结果
-
配置
在vue.config.js文件中的chainWebpack配置插件，默认会在8888端口打开
chainWebpack: config => {
config.plugin('webpack-bundle-analyzer')
.use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
}
发现主要是moment和vue系列的文件占用比较大。
二、moment优化
根据之前打包分析图来看，主要是locale下moment的其他语言包占用体积较大。默认是en的语言包，所以在无需其他语言的情况下，可以直接忽略掉locale下的文件不打包。
解决方案：用webpack自带的IgnorePlugin插件
vue.config.js文件
var webpack = require('webpack')
module.exports = {
// ...此处省略其他配置
chainWebpack: config => {
config.plugin('ignore')
.use(new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/)); //忽略/moment/locale下的所有文件
}
// ...此处省略其他配置
}
三、vue、vue-router、vuex改为cdn引入
将引用的外部js、css文件剥离开来，不编译到vendor.js中，而是用资源的形式引用，这样浏览器可以使用多个线程异步将vendor.js、外部的js等加载下来，达到加速首开的目的。
外部的库文件，可以使用CDN资源，或者别的服务器资源等。
1. vue.config.js中增加externals，将引用的外部模块导入
module.exports = {
// ...此处省略其他配置
chainWebpack: config => {
var externals = {
'vue': 'Vue',
'vue-router': 'VueRouter',
'vuex': 'Vuex'
}
config.externals(externals)
}
// ...此处省略其他配置
}
2. html文件中直接script引入cdn文件
cdn引入的地址可以参考官网
https://cn.vuejs.org/v2/guide/installation.html#CDN
引入cdn文件
也可以像这篇文章是直接在vue.config.js中配置cdn的url地址vue-cli3打包项目引入外部CDN资源文件
四、优化结果
moment的其他语言包没有被打包了，vue等文件也都用的cdn文件，没有被打包进去vendor。
优化后打包分析
优化后打包结果
network
五、vue项目的其他优化建议
-
productsourceMap：false（在vue.config.js中配置）
打包后每个js文件都有一个map文件。
map文件的作用：项目打包后，代码都是经过压缩加密的，如果运行时报错，输出的错误信息无法准确得知是哪里的代码报错。 有了map就可以像未加密的代码一样，准确的输出是哪一行哪一列有错。
配置该项为false可以不生成map文件。 -
路由懒加载(按需加载)
可参考官方文档。
踩过的一个坑：import里面的组件路径，可以用字符串模板``形式，但是不支持变量赋值。 -
使用插件去除console、warnings、debugger等无用内容来减少文件大小
// 安装uglifyjs-webpack-plugin
cnpm install uglifyjs-webpack-plugin --save-dev
