Web 前端打包优化

随着前端技术的快速发展，页面的很多功能和组件都有开源的实现，只需要把对应的开源项目的依赖加入到 package.json 的 dependencies 节点，配置好坐标中的项目名称和版本，便可直接使用。

但依赖的开源项目中往往只用到了其中的少部分功能或代码，但在使用 webpack 打包时会把开源依赖包中所有的资源全打包，这时需要进行相应的优化。

一、moment.js 去除无用的语言包

moment.js 是一个时间处理的开源实现，方便将时间进行各种操作和格式化，其主包中包含了多国语言的本地化。

大部分项目都只是在国内使用，只需要简体中文即可。

安装 moment-locales-webpack-plugin 打包依赖插件：

npm i -D moment-locales-webpack-plugin

webpack 打包文件配置。

const MomentLocalesPlugin = require('moment-locales-webpack-plugin')
module.exports = {
configureWebpack() {
return {
plugins: [
// moment，去除国际化，只保留简体中文
   new MomentLocalesPlugin({
      localesToKeep: ['zh-cn'],
   }),
    ]}
   }
}

打包后的文件就只包含简体中文，减少 600k 左右大小。

二、去除 js 源码终端注释、debugger、console.log()

前端在开发过程中，加入注释方便理解代码，加入debugger和console.log()调试程序，打包时就不希望这些无用的代码占用，有时还可能会泄露信息。
只需要加入打包优化插件即可去除开发过程中的debugger和console.log()。

安装 terser-webpack-plugin 打包依赖插件：

npm i -D terser-webpack-plugin@4.2.3

webpack 打包文件配置。

const isProduction = process.env.NODE_ENV === 'production' // 判断是否打包生成生产生产环境的包
const TerserPlugin = !isProduction ? {} : require('terser-webpack-plugin')
const minimizer = !isProduction
? []
: [
    new TerserPlugin({
        extractComments: false,
        cache: true,
        terserOptions: {
            ecma: undefined,
            warnings: false,
            parse: {},
            format: {
                comments: false,
            },
            compress: {
                drop_console: true, // 清除 console 语句
                drop_debugger: true, // 清除 debugger 语句
                pure_funcs: ['console.log'], // 移除console
            },
        },
    }),
]



module.exports = {
configureWebpack() {
return {
 optimization: {
    // 此处添加 移除console.log 和 debugger的代码
    minimizer: minimizer,
  },}
   },
  chainWebpack(config) {
         if(isProduction){
        // 删除注释、debug、console.log
            config.optimization.minimizer('terser').tap((args) => {
                args[0].extractComments = false
                args[0].cache = true
                args[0].terserOptions.compress.drop_console = true
                args[0].terserOptions.compress.drop_debugger = true
                args[0].terserOptions.compress.pure_funcs = ['console.log']
                args[0].terserOptions.output = {
                  comments: false,
                }
            return args
        })
    }
    }
}

打包后的文件已去除 注释、debugger和console.log()。