vue之webpack|vue之webpack ”一条龙“优化 vue之webpack”一条龙“优化

打包优化

开启gzip压缩，减小js，css的体积
下载依赖
npm install compression-webpack-plugin -D
修改vue.config.js

let CompressionPlugin = require('compression-webpack-plugin'); module.exports ={ configureWebpack: config => { config.plugins.push( new CompressionPlugin({ test:/\.(js|css)(\?.*)?$/i,//需要压缩的正则 threshold: 10240,//文件大小大于这个值时启用压缩 deleteOriginalAssets: false//压缩后保留原文件 }) ); } }

使用gzip压缩打包后的js和css文件，需要Nginx中配置 gzip_static on;
配置完后打包后在dist文件夹中的js和css文件会多出zip压缩包对比源文件压缩率可以达到百分六七十左右。

插件优化

cdn加载插件：
在vue.config.js中配置忽略打包文件

module.exports ={ chainWebpack: (config) => { //忽略的打包文件 config.externals({ 'echarts':'echarts' }) } }

在public的index.html中添加script标签

webpack自带优化选项依赖包拆分

module.exports = { configureWebpack: config => { let optimization={ runtimeChunk: 'single', splitChunks: { chunks: 'all', maxInitialRequests: Infinity, minSize: 1638400, // 依赖包超过20000bit(2kb)将被单独打包 1638400bit(200k) cacheGroups: { vendor: { test: /[\\/]node_modules[\\/]/, name(module) { const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1] return `npm.${packageName.replace('@', '')}` } } } } } //混入配置 Object.assign(config, { optimization }); } }

webpack魔法注释

使用/* webpackChunkName: "group-role" */指定打包后的chunk分组，例如：

export default [ { path: '/wel', component: Layout, redirect: '/wel/index', children: [{ path: 'index', name: '首页', component: () => import ( /* webpackChunkName: "views" */ '@/page/index') }] }, { path: '/statistic', component: Layout, redirect: '/statistic/index', children: [{ path: 'reg-detail', name: '详情页', component: () => import ( /* webpackChunkName: "utils" */ '@/views/page/log') } ]

打包后，将会被分别装入utils.[hash code].js views.[hash coed].js中

webpack-bundle-analyzer插件分析依赖关系

使用webpack-bundle-analyzer插件分析打包后的js大小及依赖关系
【vue之webpack|vue之webpack ”一条龙“优化】安装webpack打包分析依赖npm install -D webpack-bundle-analyzer
package.json配置script命令（如果是windows环境，需要再安装cross-env到开发依赖再添加命令）
script命令："analyz": "NODE_ENV=production npm_config_report=true npm run build"
Windows下的script命令："analyz": "cross-env NODE_ENV=production npm_config_report=true npm run build"
在vue.config.js中配置

let BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin; module.exports = { configureWebpack: config => { config.plugins.push( new BundleAnalyzerPlugin( { analyzerMode: 'server', analyzerHost: '127.0.0.1', analyzerPort: 8889, reportFilename: 'report.html', defaultSizes: 'parsed', openAnalyzer: true, generateStatsFile: false, statsFilename: 'stats.json', statsOptions: null, logLevel: 'info' } ) ); } }

以上配置完成后使用npm run analyz 运行访问127.0.0.1:8889即可看到打包后文件的依赖关系及文件的大小。
使用这个插件需要注意，如果你的公司使用自动化部署工具如jerkins，这个插件在打包完后会打开浏览器访问配置中的地址，而一般的部署环境在Linux中，这就导致部署一直卡在这一步中，部署也不报错就一直处于等待状态，在傻傻的等了一天最后发现是这个问题，配置openAnalyzer: false也无法解决，所以这个插件在本地配置跑一跑足矣，无需提交到生产环境中去