浅谈Webpack打包优化技巧

// a.js
require('./chunk1');
require('./chunk2');
require('jquery');
// b.js
require('./chunk1');
require('./chunk2');
require('vue');
// webpack配置如下
module.exports = {
 entry: {
  main: './main.js', 
  main1: './main1.js',    
  jquery:["jquery"],   
  vue:["vue"]  
 },  
 output: {   
  path: __dirname + '/dist',  
  filename: '[name].js' 
 },  
 plugins: [ 
  new CommonsChunkPlugin({  
   name: ["common","jquery","vue","load"],  
   minChunks:2 
  })  
 ] };

new webpack.optimize.CommonsChunkPlugin({
 name: 'vendor',
 minChunks: function (module, count) {
  // 将node_modules中的依赖模块全部提取到vendor文件中
  return (
   module.resource &&
   /\.js$/.test(module.resource) &&
   module.resource.indexOf(
    path.join(__dirname, '../node_modules')
   ) === 0
  )
 }
}),
// webpack在使用CommonsChunkPlugin时会生成一段runtime代码，并且打包进vendor中。
// 这样即使不改变vendor代码，每次打包时runtime会变化导致vendor的hash变化，这里
// 把独立的runtime代码抽离出来来解决这个问题
new webpack.optimize.CommonsChunkPlugin({
 name: 'manifest',
 chunks: ['vendor']
}),

// 插件配置
plugins: [
 // 忽略moment.js中所有的locale文件
 new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
],
// 使用方式
const moment = require('moment');
// 引入zh-cn locale文件
require('moment/locale/zh-cn');
moment.locale('zh-cn');

// 插件配置
plugins: [
 // 只加载locale zh-cn文件
 new webpack.ContextReplacementPlugin(/moment[\/\\]locale$/, /zh-cn/),
],
// 使用方式
const moment = require('moment');
moment.locale('zh-cn');

import {chain, cloneDeep} from 'lodash';
// 可以改写为
import chain from 'lodash/chain';
import cloneDeep from 'lodash/cloneDeep';

// 在html中添加script引用
<script src="/UploadFiles/2021-04-02/jquery.min.js">



// 这里externals的key指的是使用时需要require的包名，value指的是该库通过script引入后在全局注册的变量名
externals: {
 jquery: 'jQuery'
}
// 使用方法
require('jquery')


通过 DLLPlugin 和 DLLReferencePlugin 拆分文件


如果项目过大，打包的时间会相当的长，如果频繁更新上线则会不断对代码进行编译打包，浪费很多时间。这时我们便可以将那些不常更新的框架和库(如vue.js等)进行单独的编译打包，这样每次开发上线就只需要对我们的开发文件进行编译打包，这样可以极大地省去不必要的打包时间。而这种方法需要 DLLPlugin 和 DLLReferencePlugin 两个插件的配合来完成。
DLLPlugin


在使用这个插件时，我们需要单独创建一个配置文件，这里命名为 webpack.dll.config.js ，配置如下：


module.exports = {
 entry: {
  lib: ['vue', 'vuex', 'vue-resource', 'vue-router']
 },
 output: {
  path: path.resolve(__dirname, '../dist', 'dll'),
  filename: '[name].js',
  publicPath: process.env.NODE_ENV === 'production'
   "production"'
  }),
  /**
   * path: manifest.json输出文件路径
   * name: dll对象名，跟output.library保持一致
   */ 
  new webpack.DllPlugin({
   context: __dirname,
   path: path.resolve(__dirname, '../dist/dll', 'lib.manifest.json'),
   name: '[name]_library'
  })
 ]
}



这里要注意几点：

  
entry 中写明所有要单独打包的模块
  
output 的 library 属性可以将dll包暴露出来
  
DLLPlugin 的配置中， path 指明 manifest.json 文件的生成路径， name 暴露出dll的函数名

运行该配置文件便可生成打包文件和 manifest.json 文件。
DLLReferencePlugin


对于该插件的配置，不需要像上面一样单独写配置文件，只需要在生产配置文件中添加如下代码：


new webpack.DllReferencePlugin({    
 context: __dirname,         // 同dll配置的路径保持一致
 manifest: require('../dist/dll/lib.manifest.json') // manifest的位置
}),


然后运行webpack，发现打包的速度得到了极大地提升，也不用每次更新代码的时候重复编译打包这些依赖库了。
其他


对于webpack的打包优化我大致就总结了上面的一些方法，而为了让页面更快的加载，有更好的用户体验，我们并不只是从打包上优化，也可以有其他方面的优化，这里我也简单提一下我使用过的方法。
开启Gzip压缩


开启gzip压缩可以减少HTTP传输的数据量和时间，从而减少客户端请求的响应时间，由于降低了请求时间，页面的加载速度也会得到提升，会有更快的渲染速度，极大地改善了用户体验。由于现在基本上所有的主流浏览器都支持Gzip的压缩方式，只需要对服务器进行相关设置即可，这里就不具体讲如何配置服务器。
压缩混淆代码


我们平常也会对代码进行压缩混淆，可以通过 UglifyJS 等工具来对js代码进行压缩，同时可以去掉不必要的空格、注释、console信息等，也可以有效的减小代码体积。
总结


本文到这里就结束了，主要是对webpack的打包优化部分做了些讲解，当然能力和时间有限，只研究了部分方法，可能会有其他更多的优化方法，无论是从编译打包的体积还是速度上都能有更好的优化。接触了一段时间的webpack发现作为一个打包工具实在是过于复杂，无论从开始的官方文档还是到新的高级特性，都很难去完全掌握，还得需要自己不断去实践去深入研究才行。


以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。