Webpack5+vscode搭建kintone开发环境(五)生产环境设置

cybozu发表于:2021年01月07日 14:18:51更新于:2021年07月28日 14:34:12

目录

第一篇:初始化项目
第二篇:代码规范
第三篇:Webpack 基本配置
第四篇:开发环境设置
第五篇:生产环境设置
第六篇:css、less、scss、图片支持
第七篇:IE11 兼容
第八篇:支持 React
第九篇:支持 Typescript>
第十篇:命令行工具


和开发环境不同,生产环境更注重性能上的提升,而不在乎编译的次数,因此需要满足以下内容:

  • 压缩代码

  • 分离代码,避免单个文件过大

  • 移除 console.log 和注释


清理环境

之前多次修改代码并运行 build 命令的人会发现,dist 目录变得很乱,里面有多个 app.${hash}.js。

为此必须在 build 之前清理一下环境,这里使用 clean-webpack-plugin
安装:

npm install clean-webpack-plugin -D

打开 webpack.prod.js 文件,增加以下代码:

const { CleanWebpackPlugin } = require('clean-webpack-plugin')

module.exports = {
  // others
  plugins: [new CleanWebpackPlugin()],
}

运行

npm run build

你会发现 dist 目录干净多了。


清理 console.log

我们在 index.js 里面加一段 console.log 代码和注释。
重新 build 之后看看生成的 app.${hash}.js,发现代码压缩了,注释也去掉了,但 console.log 留下了。

要去除 console.log 必须重定义内置压缩插件 terser-webpack-plugin

该插件需要重新安装一下。

npm install terser-webpack-plugin -D

打开 webpack.prod.js 文件,增加以下代码:

const TerserPlugin = require('terser-webpack-plugin')

module.exports = {
  // others
  optimization: {
    minimizer: [
      new TerserPlugin({
        extractComments: false,
        terserOptions: {
          compress: { pure_funcs: ['console.log'] },
        },
      }),
    ],
  },
}
  • extractComments:设为 false 就可以去除所有注释。

  • pure_funcs:可以设置我们想要去除的函数,比如上面是将代码中所有 console.log 去除。

重新 build 一下看看效果。


代码分片 SplitChunks

代码分片(code splitting)可以把代码按照特定的形式进行拆分。
说的简单点就是能把 import 的第三方包分离出来打成一个单独的文件。

打开 webpack.prod.js 文件,增加以下代码:

module.exports = {
  // others
  optimization: {
    // others
    splitChunks: {
      chunks: 'all',
    },
  },
}
  • chunks 的值为 all,这个配置项的含义是,SplitChunks 将会对所有的 chunks 生效。

这块设置我们可以在之后的IE兼容和React中看到效果。webpack 会打包出 2 个 js 文件,一个 lib ,一个 app 。


tree-shaking

这块 webpack 已经默认支持,因此不再赘述。

感兴趣的同学请在 index.js 中添加一个未被引用的函数,然后 build 以后看看输出的文件内容。


打包分析

打包好以后,我们想知道打出的包都有哪些,具体多大这时候就可以借助 webpack-bundle-analyzer
安装:

npm install webpack-bundle-analyzer -D

打开 webpack.prod.js 增加以下 plugin 即可:


const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer')

module.exports = merge(common, {
    // others
  plugins: [
    // others
    new BundleAnalyzerPlugin()
  ],
  // others
}

再次运行 build,运行结束后会自动打开浏览器。
图


    注意:贴代码时请注意格式并使用"代码语言",与本文无关的问题请至“讨论社区”提问。