CLI3项目优化
版本信息
时间：2019年01月17日09:41:29
vue: 3.1.0
webpack: 4.28.4
node:11.0.0
原始包信息
1.去除map文件
map文件是js文件压缩后，文件的变量名替换对应、变量所在位置等原信息数据文件。个人理解是：对js压缩过程的记录，如浏览器支持，可以通过map文件还原文件到未压缩之前。
文件vue.config.js
增加以下代码
productionSourceMap: false,
打包查看：
2.CSS分离
文件vue.config.js
增加以下代码：
css: {
// 是否使用css分离插件 ExtractTextPlugin
extract: true,
// 开启 CSS source maps?
sourceMap: false,
// css预设器配置项
loaderOptions: {},
// 启用 CSS modules for all css / pre-processor files.
modules: false
},
3.图片压缩
文件vue.config.js
npm install image-webpack-loader --save-dev
增加以下代码：
// 压缩图片
chainWebpack: config => {
config.module
.rule('images')
.use('image-webpack-loader')
.loader('image-webpack-loader')
.options({
bypassOnDebug: true
})
.end()
},
打包查看：
这段代码做了两件事：一是压缩，二是转Base64
可以发现在dist/img下面的图片少了一部分，原因是：不超过4096字节会被转换成Base64编码,用require引用的也会被转成和base64，超出这个限制则会被打包在img文件夹下。
4.公共代码抽离
文件vue.config.js
增加以下代码：
configureWebpack: () => ({
optimization: {
splitChunks: {
cacheGroups: {
vendor:{
chunks:"all",
test: /node_modules/,
name:"vendor",
minChunks: 1,
maxInitialRequests: 5,
minSize: 0,
priority:100,
},
common: {
chunks:"all",
test:/[\\/]src[\\/]js[\\/]/,
name: "common",
minChunks: 2,
maxInitialRequests: 5,
minSize: 0,
priority:60
},
styles: {
name: 'styles',
test: /\.(sa|sc|c)ss$/,
chunks: 'all',
enforce: true,
},
runtimeChunk: {
name: 'manifest'
}
}
}
}
}),
这里抽取了项目中公共的css、js部分，还有其他的，可以自行匹配test（正则）
查看效果：
注意：目前项目中的动态路由加载使用上仍然不合理，后续待优化。
5.CDN
注意：不建议使用，重点是维护上不受控制。
6.GZip
asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
意思是这些文件大于了244kb，可以使用Gzip在压缩一次
npm i -D compression-webpack-plugin
文件vue.config.js
增加以下代码：
plugins:[
new CompressionWebpackPlugin({
filename: '[path].gz[query]',
algorithm: 'gzip',
test: /\.js$|\.html$|\.json$|\.css/,
threshold: 0, // 只有大小大于该值的资源会被处理
minRatio:0.8, // 只有压缩率小于这个值的资源才会被处理
deleteOriginalAssets: true // 删除原文件
})
],
查看效果：
注意：目前测试环境服务器未开启Gzip，所以原文件不能删除，deleteOriginalAssets：false.
再次修改上述代码：
const needGzip = process.env.NODE_ENV === 'production' && process.env.VUE_APP_BASE_URL !== '/falcon-controller/'
if (needGzip) {
const plugins = []
plugins.push(
new CompressionWebpackPlugin({
filename: '[path].gz[query]',
algorithm: 'gzip',
test: /\.css$|\.ttf$|\.html$|\.svg$|\.json$|\.js$/,
threshold: 0, // 只有大小大于该值的资源会被处理
minRatio: 0.8, // 只有压缩率小于这个值的资源才会被处理
deleteOriginalAssets: true// 删除原文件
}),
)
config.plugins = [
...config.plugins,
...plugins
]
}
压缩后会有文件路径的变动，要要修改，更改filename即可
现在再编译检查：npm run build
