目录

章节配图

# 前言

webpack 至今已经发展了 5 个版本，如果你还不会 webpack，那么赶紧学习起来吧。webpack 是 web 前端开发人员必学的一个知识点。本篇文章带大家一起看看 webpack 基础的打包优化。话不多说，上酸菜~~~~

# 优化 loader

在脚手架项目中,想必各位开发人员都会用到预处理的 css。比如sass、stylus、less这些预处理语言。我们知道使用这些预处理 css 必须要在 webpack 中配置相应的 loader。 当我们配置过多的 loader 时,各 loader 之间必定会转换出大量的代码,这些代码会导致项目在启动和打包时变得非常慢,这个时候就需要我们去进行 loader 的优化了。在 loader 的相关的配置中,我们可以排除掉第三方包中的文件,减少 loader 代码转换的范围。

module.exports = {
    module: {
        rules: [
            test: /\.css$/,
            loader: ['style-loader', 'css-loader'],
            include: [resolve('src')],// 只在src文件夹下查找
            // 不去查找的文件夹路径，node_modules下的代码是编译过得，没必要再去处理一遍
            exclude: /node_modules/
        ]
    }
}
已复制

# 压缩代码

在 webpack 中,我们可以使用 UglifyjsWebpackPlugin 这个插件来压缩 js 和 css 的代码,从而减小项目打包的体积,提升打包速率。

注意

在开发环境我们不需要使用这个插件~

// 安装插件
// npm install uglifyjs-webpack-plugin --save-dev

//在 vue.config.js中
/** 引入uglifyjs-webpack-plugin */
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
/** 全局变量，当前环境 */
const env = process.env.NODE_ENV;
module.exports = {
...
configureWebpack: config => {
  if (env === "production") {
    config.optimization.minimizer.push(
        new UglifyJsPlugin({
          //测试匹配压缩的文件
          test: /.js(?.*)?$/i,
          //要被压缩的文件
          include: //includes/,
          //是否开启文件缓存
          cache: true,
          //是否开启多进程并行压缩
          paralleL: true,
          // 使用uglifyOptions移除掉生产环境中的console
          uglifyOptions: {
            warnings: false,
            compress: {drop_console: true, drop_debugger: true, pure_funcs: ['console.log']}
          }
        }))
  }}}
已复制

uglifyjs-webpack-plugin 这个插件还有很多的配置项 具体可以参考 uglifyjs-webpack-plugin 注意开启 parallel 多进程压缩对项目打包速度的提升很有帮助

# gzip 压缩

除了压缩 js 和 css ,我们还可以压缩 webpack 打包之后的文件。 开启gzip压缩后webpack生成的js文件的体积将缩小原来的30%以上。 要开启gzip压缩 我们也需要用到一个插件compression-webpack-plugin` 并且我们还需要保证服务端和客户端都支持 gzip。

// 安装插件
// npm install compression-webpack-plugin --save-dev

//在 vue.config.js中
/** 引入compression-webpack-plugin */
const CompressionWebpackPlugin = require('compression-webpack-plugin');
const productionGzipExtensions = /.(js|css|json|txt|html|icon|svg)(?.*)$/i
module.exports = {
...
configureWebpack: config => {
  if (env === "production") {
    config.plugins.push({
      new CompressionWebpackPlugin({
       filename: '[path].gz[query]',
       algorithm: 'gzip',
       test: productionGzipExtensions,
       threshold: 10240,
       minRatio: 0.8
  })
    })
  }}}
已复制

compression-webpack-plugin 这个插件同样也有很多的配置项，具体参考compression-webpack-plugin (opens new window)

# 抽离公共依赖包

对于一些体积较大，不长更新的包,我们并不需要下载到项目中使用。我们可以选择使用 cdn 的方式去进行引入，当然最好还是将这些库放在自己的服务器下~ webpack 允许我们在外部引入一些资源。 在webpack的配置中有这样一个配置项 externals:

防止将某些  import  的包(package)打包到 bundle 中，而是在运行时(runtime)再去从外部获取这些扩展依赖(external dependencies) 。

从外部加载扩展的依赖而不是在项目中获取。 显然，这肯定能减少项目大小,缩小打包体积。 抽离公共依赖包我们也需要安装一个插件html-webpack-plugin。使用这个插件主要是将外部引入的 cdn 放到index.html中加载。 如果你的 webpack 的版本大于 4.0 那么你无需安装，webpack4.0 已经自带了该插件。本项目中的webpack的版本是 4.2.15 的因此无需安装 下面和我一起看看该如何进行配置:

// 在 vue.config.js中
const baseUrl = 'https://minturechan.oss-cn-shenzheng.aliyuncs.com/npm';
const cdn = {
  js: [
    `${baseUrl}vue@2.6.11/dist/vue.min.js`,
    `${baseUrl}vue-router@3.2.0/dist/vue-router.min.js`,
    `${baseUrl}vuex@3.4.0/dist/vuex.min.js`,
    `${baseUrl}view-design@4.0.0/dist/iview.min.js`,
    `${baseUrl}jquery@3.4.1/dist/jquery.min.js`,
  ],
  css: [`${baseUrl}view-design@4.0.0/dist/styles/iview.css`],
};
module.exports = {
  chainWebpack: (config) => {
    //config.plugin('html')这个表示获取 html-webpack-plugin这个插件~
    config.plugin('html').tap((args) => {
      if (env === 'production') {
        args[0].cdn = cdn;
      }
      return args;
    });
  },
};
已复制

在 vue.config.js 中配置完成后 我们还需要在 public 文件夹下的 index.html 中引入

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no" />
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Expires" content="0" />
    <link rel="icon" href="<%= BASE_URL %>zyd.ico" />
    <title>test</title>
    <% for (var i in htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.css) { %>
    <link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="preload" as="style" />
    <link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="stylesheet" />
    <% } %> <% for (var i in htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.js){ %>
    <script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
    <% } %>
  </head>
  <body>
    <div id="app">
      <!-- built files will be auto injected -->
    </div>
  </body>
</html>
已复制

在 index.html 中加上如下代码即可引入外部 cdn 资源~~

# 最后

webpack 还有非常多可以优化的地方，本文只是简单的说明了一些 webpack 基础的打包优化配置。

Webpack 基础打包优化 (opens new window)