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

❤ 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//压缩后保留原文件
      })
    ],
}