vuecli4打包优化
原创
概述
通过安装一些插件，使打包后文件减小，提升页面打开速度。
vue版本 | 2.6.11 |
|---|---|
脚手架vue/cli版本 | 4.5.0 |
优化方向 | 减少代码量（取消生产sourcemap）、 合并压缩代码（gzip）、 公共代码提取 |
优化前后对比：
// 公共设置
const IS_PROD = ['production'].includes(process.env.NODE_ENV) // 生产环境vue打包优化
1. 打包分析插件
1.1 安装插件
npm install --save-dev webpack-bundle-analyzer
或
yarn add -D webpack-bundle-analyzer1.2 在vue.config.js中配置：
module.exports = {
chainWebpack: config => {
// 打包分析
if (IS_PROD) {
config.plugin('webpack-report').use(BundleAnalyzerPlugin, [{
analyzerMode: 'static'
}])
}
}
}1.3 打包
会在dist文件下生成report.html分析页面
npm run build2. 去掉console
2.1 下载安装插件
cnpm install uglifyjs-webpack-plugin --save-dev2.2 在vue.config.js中配置：
const IS_PROD = ['production'].includes(process.env.NODE_ENV)
const UglifyJsPlugin = require('uglifyjs-webpack-plugin') // 去除console
configureWebpack: config => {
const plugins = [];
if (IS_PROD) { // 生产环境
plugins.push(
new UglifyJsPlugin({
uglifyOptions: {
output: {
comments: false, // 去掉注释
},
warnings: false,
compress: {
drop_console: true,
drop_debugger: false,
pure_funcs: ['console.log'] //移除console
}
}
})
)
}
config.plugins = [...config.plugins, ...plugins];
}2.3 打包
部署到服务器，F12后，在console查看没有console的输出内容
npm run build3. gzip压缩
3.1 安装插件
安装5.00及以下的版本(高版本会报错)，安装命令：
yarn add compression-webpack-plugin -D在package.json中
"compression-webpack-plugin": "^5.0.0",3.2 在vue.config.js中配置
const CompressionWebpackPlugin = require('compression-webpack-plugin') // gzip压缩
configureWebpack: config => {
const plugins = [];
if (IS_PROD) { // 生产环境
plugins.push(
new CompressionWebpackPlugin({
filename: '[path].gz[query]',
algorithm: 'gzip',
// test: /\.js$|\.html$|\.json$|\.css/,
test: /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i,
threshold: 10240, // 只有大小大于10k该值的资源会被处理
minRatio: 0.8, // 只有压缩率小于这个值的资源才会被处理
deleteOriginalAssets: true // 删除原文件
})
)
}
config.plugins = [...config.plugins, ...plugins];
},3.3 打包
npm run build
3.4 nginx中配置：
server {
location ~ .*\.(js|json|css)$ {
gzip on;
gzip_static on; # gzip_static是nginx对于静态文件的处理模块，该模块可以读取预先压缩的gz文件，这样可以减少每次请求进行gzip压缩的CPU资源消耗。
gzip_min_length 1k;
gzip_http_version 1.1;
gzip_comp_level 9;
gzip_types text/css application/javascript application/json;
root /home/tsgz/dist_hlj/; // 修改为项目前端目录
}
}3.5 部署到服务器
预览查看效果是否生效
4. sourceMap 设置
生产环境设置为false，不产生sourceMap
module.exports = {
productionSourceMap: !IS_PROD, // 生产环境是否生成 sourceMap 文件
// css相关配置
css: {
extract: !IS_PROD, // 是否使用css分离插件 ExtractTextPlugin
sourceMap: !IS_PROD, // 开启 CSS source maps
//此项设置为false会影响element-ui引入时样式失效
// requireModuleExtension: false // css-loader升级v3后使用css.requireModuleExtension代替css.modules 默认为true
},
}原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读
目录