❤ vue2项目webpack打包的优化策略

（优化前）

现在我们的打包时间为：
>打包体积大小为：

1、去除开发环境和生产环境提示以及日志

开发环境和生产环境的打印处理

生产环境去除console.log打印的两种方式

通过环境变量控制console.log的打印，具体操作如下：

第一种

1、根目录 .env.xxx文件中写入NODE_ENV参数

2、在main.js里面加上下列语句：

if (process.env.NODE_ENV === 'production') {console.log = () => {}console.warn = () => {}
}

以上完成了配置

第二种

在babel.config.js 文件中进行修改

1、需下载这个包transform-remove-console
```js
npm install babel-plugin-transform-remove-console --save-dev

2、在babel.config.js可如下写

// babel.config.js
// 生产环境移除console
const remPlugins = []
if (process.env.NODE_ENV === 'production') {remPlugins.push('transform-remove-console')
}module.exports = {"plugins":[...remPlugins ]
};

根据当前的开发模式或打包模式来使用不同的入口文件

module.exports = {chainWebpack: config => {// 打包模式config.when(process.env.NODE_ENV === 'production', config => {config.entry('app').clear().add('./src/main-prod.js')})// 开发模式config.when(process.env.NODE_ENV === 'development', config => {config.entry('app').clear().add('./src/main-dev.js')})}
}

2、 build后不可查看源码

不设置的情况下，打包上线，可在 f12 -> sources -> webpack:// 下查看到项目源码

在vue.config.js中配置

const isProduction = process.env.NODE_ENV === 'production'
module.exports = {productionSourceMap: false,configureWebpack: {devtool: isProduction ? false : "source-map",}
}

3、解决每次发版都要强刷清除浏览器缓存

原理
将打包后的js和css文件，加上打包时的时间戳

1 index.html
在 public 目录下的index.html文件里添加如下代码

<meta http-equiv="pragram" content="no-cache">
<meta http-equiv="cache-control" content="no-cache, no-store, must-revalidate">
<meta http-equiv="expires" content="0">

vue.config.js

let timeStamp = new Date().getTime();
module.exports = {publicPath: "./",filenameHashing: false,// 打包配置configureWebpack: {output: { // 输出重构 打包编译后的js文件名称,添加时间戳.filename: `js/js[name].${timeStamp}.js`,chunkFilename: `js/chunk.[id].${timeStamp}.js`,}},css: {extract: { // 打包后css文件名称添加时间戳filename: `css/[name].${timeStamp}.css`,chunkFilename: `css/chunk.[id].${timeStamp}.css`,}}
};

4、配置Vue2项目打包优化命令行（Tree-shaking）

Tree-shaking 是一种通过静态分析代码来检测未使用部分的技术

（1）添加–report命令：“build”: “vue-cli-service build --report”，打包后 dist 目录会生成 report.html 文件，用来分析各文件的大小

打开以后如图所示

5、配置V2打包优化对比工具webpack-bundle-analyzer （（Tree-shaking））

webpack有一种可视化的打包分析工具：webpack-bundle-analyzer ，在vue.config.js中引入，代码如下：npm run build的时候会出现打包分析图

npm install webpack-bundle-analyzer -D

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;module.exports = {
configureWebpack: {plugins: [new BundleAnalyzerPlugin()]}        
}

6、externals 提取公共依赖包

在我打包之前项目体积如图

vue.config.js 中配置

configureWebpack: {name: name,resolve: {alias: {'@': resolve('src')}},externals: {vue: 'Vue','vue-router': 'VueRouter',axios: 'axios',echarts: 'echarts'},// 打包插件// plugins: [newBundleAnalyzerPlugin],},

在 index.html 中使用 CDN 引入依赖

vue
<script type="text/javascript" src="https://lib.baomitu.com/vue/2.6.10/vue.min.js"></script>vue-router<script type="text/javascript" src="https://lib.baomitu.com/vue-router/3.0.2/vue-router.min.js"></script>axios   <script type="text/javascript" src="https://lib.baomitu.com/axios/0.18.1/axios.min.js"></script>echarts
<script type="text/javascript" src="https://lib.baomitu.com/echarts/4.7.0/echarts.min.js"></script>

配置后如图

7、babel-plugin-component（未使用）

通过该插件，最终只引入指定组件和样式，来实现减少组件库体积大小

// 安装
npm install babel-plugin-component -D

babel.config.js中引入

plugins: ['component',{'libraryName': 'element-ui','styleLibraryName': 'theme-chalk',}],

8、使用 moment-locales-webpack-plugin插件，剔除掉无用的语言包

安装
npm install moment-locales-webpack-plugin -D

vue.config.js 中引入

constMomentLocalesPlugin = require( 'moment-locales-webpack-plugin');
module.exports = {
configureWebpack: {plugins: [newMomentLocalesPlugin({ localesToKeep: [ 'zh-cn']})]
}
}

9、HappyPack 多线程打包（提升打包速度）

由于运行在 Node.js 之上的 webpack 是单线程模型的，我们需要 webpack 能同一时间处理多个任务，发挥多核 CPU 电脑的威力

HappyPack就能实现多线程打包，它把任务分解给多个子进程去并发的执行，子进程处理完后再把结果发送给主进程，来提升打包速度

vue2

安装
npm install happypack -D//vue.config.js中进行配置//顶部引入
const HappyPack = require('happypack');
const happyThreadPool = HappyPack.ThreadPool({ size: os.cpus().length });
const os = require('os');chainWebpack(config){config.plugin('happypack').use(HappyPack).tap(options=>{options[0]={id:'babel',loaders:['babel-loader?cacheDirectory=true'],threadPool: happyThreadPool}return options})const hRule = config.module.rule('js')hRule.test(/\.js$/).include.add(resolve('src')).end()hRule.uses.clear()hRule.use('happypack/loader?id=babel').loader('happypack/loader?id=babel').end()
}

安装
npm install happypack -D

vue.config.js 中引入

constHappyPack = require( 'happypack');
constos = require( 'os');
consthappyThreadPool = HappyPack.ThreadPool({ size: os.cpus.length });

10、Gzip压缩

安装
npm install compression-webpack-plugin -D

vue.config.js 中引入

// 引入
const CompressionPlugin = require( 'compression-webpack-plugin');//使用configureWebpack: { // 打包插件plugins:[new CompressionPlugin({test: /\.(js|css)(\?.*)?$/i, //需要压缩的文件正则threshold: 1024, //文件大小大于这个值时启用压缩deleteOriginalAssets: false//压缩后保留原文件})],
}