1.起因
项目打包的时候发现部分文件过大：vender.js有400K，app.css高达1.6M。看着这个数值，瞬间凌乱。
2.优化
2.1 优化vender.js
是因项目的依赖 vue、vue-router、vuex、axios 造成的，可使用cdn,注意更换对应版本号
在 build/webpack.base.conf.js 中添加如下代码,使其不打包进文件
module.exports = {
//...
externals: {
'vue': 'Vue',
'vue-router': 'VueRouter',
'vuex':'Vuex'
},
//...
}
去掉相关引用代码
// import Vue from 'vue'
// import Router from 'vue-router'
// import Vuex from 'vuex'
2.2 优化app.css
是因项目css中使用的图片全部转成了base64写入了css中，导致app.css体积过大，首屏加载过慢，在 build/webpack.base.conf.js 中设置图片下的url-loader的大小限制
module: {
rules: [
//...
{
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
options: {
name: utils.assetsPath('img/[name].[ext]'),
limit:50 //<--添加此行，单位为 b，表示将图片大小 <=50b 的图片转成base64格式
}
},
}
//...
]}
// ---------------------打包后可能会出现css中的图片路径不对的情况，修改如下代码：
// build/utils.js 中找到 vue-style-loader
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
fallback: 'vue-style-loader',
publicPath:'../../' // <--添加此行代码
})
} else {
return ['vue-style-loader'].concat(loaders)
}
2.3 启用Gzip压缩，一般浏览器都已支持.gz的资源文件，在http请求的Request Headers 中能看到 Accept-Encoding:gzip
//config/index.js 中招到 productionGzip 设置为true
build: {
//...
productionGzip：true,
productionGzipExtensions: ['js', 'css'],
}
//build/webpack.prod.conf.js 中添加以下代码
if (config.build.productionGzip) {
const CompressionWebpackPlugin = require('compression-webpack-plugin')
webpackConfig.plugins.push(
new CompressionWebpackPlugin({
asset: '[path].gz[query]',
algorithm: 'gzip',
test: new RegExp(
'\\.(' +
config.build.productionGzipExtensions.join('|') +
')$'
),
threshold: 10240,
// deleteOriginalAssets:true, //删除源文件，不建议
minRatio: 0.8
})
)
}
每一件与众不同的绝世好东西，其实都是以无比寂寞的勤奋为前提的，要么是血，要么是汗，要么是大把大把的曼妙青春好时光
分类: vue.jshttps://www.cnblogs.com/shenmissing/p/9933450.html
