共计 1826 个字符,预计需要花费 5 分钟才能阅读完成。
注意事项:
1、vue-cli4 版本测试环境无奈打包出带有 hash 值的文件名,解决办法:
即使设置 filenameHashing:true, 也是有效的,vue-cli4 版本是认准 NODE_ENV='production',
如果想执行 npm run build:stage【指令对应环境变量文件是 env.staging】,须要设置 NODE_ENV='production'
优化次要步骤:
1、应用插件 compressionPlugin 进行 gzip 进行压缩,成果很显著
装置 npm install --save-dev compression-webpack-plugin
如果装置失败,指定版本 npm install --save-dev [email protected]
const CompressionWebpackPlugin = require('compression-webpack-plugin');
chainWebpack(config) {config.plugin('compressionPlugin').use(
new CompressionWebpackPlugin({test: /\.(js|css|json|ico|svg)$/,// 匹配文件格式
algorithm: 'gzip',
threshold: 10240, // 对超过 10k 的数据压缩
minRatio: 0.8, // 压缩比
deleteOriginalAssets: false // 是否删除源文件
})
);
}
nginx 配置,间接粘贴在 http {} 外面
gzip on; #其余属性不必,这个肯定要开,开启浏览器压缩申请
gzip_buffers 4 16k; # 压缩响应的缓冲区的数量和大小
gzip_comp_level 9; # 响应压缩的级别,1-9,数字越大压缩得越好,但越耗时间
gzip_http_version 1.1; # 默认 1.1,所需的最小 HTTP 版本
gzip_min_length 1k; # 压缩最小大小,小于该值的文件不会被压缩
gzip_types text/plain application/x-javascript text/css application/xml text/javascript application/x-httpd-php application/javascript application/json;
gzip_disable "MSIE [1-6]\.";
gzip_vary on;
2、应用 vue-cli4 自带的 splitChunks 来分隔代码,会对公共模块进行抽取
chainWebpack(config) {
config
.when(process.env.NODE_ENV !== 'development',
config => {
config
.plugin('ScriptExtHtmlWebpackPlugin')
.after('html')
.use('script-ext-html-webpack-plugin', [{inline: /runtime\..*\.js$/}])
.end()
config
.optimization.splitChunks({
chunks: 'all',
cacheGroups: {
libs: {
name: 'chunk-libs',
test: /[\\/]node_modules[\\/]/,
priority: 10,
chunks: 'initial'
},
elementUI: {
name: 'chunk-elementUI',
priority: 20,
test: /[\\/]node_modules[\\/]_?element-ui(.*)/
},
commons: {
name: 'chunk-commons',
test: resolve('src/components'),
minChunks: 3,
priority: 5,
reuseExistingChunk: true
}
}
})
config.optimization.runtimeChunk('single')
}
)
}
3、cdn 援用依赖资源,不要应用预加载 rel=’prefetch’, 节约首页加载性能;
4、图片压缩,去除空格插件 terser-webpack-plugin,等等
5、入口文件 main.js 的按需引入也是比拟重要的,只有在首页关联用到的文件,都会加载 splitChunks 切出来的文件,所以须要按需引入。
6、路由懒加载等开发细节,本人把控就好。
正文完