webpack2-minifying（压缩代码）

最新推荐文章于 2024-04-26 18:25:44 发布

weixin_33696822

最新推荐文章于 2024-04-26 18:25:44 发布

阅读量260

点赞数

文章标签： webpack python ViewUI

原文链接：https://my.oschina.net/u/3554461/blog/994894

版权

2019独角兽企业重金招聘Python工程师标准>>>

今天学习的是压缩代码章节，原文链接：webpack2

启用性能预算（Performance Budget）限制构建出的bundle大小。

在 webpack.config.js 中配置

const productionConfig = merge([

  {
    performance: {
      hints: 'warning', // 'error' or false are valid too
      maxEntrypointSize: 100000, // in bytes
      maxAssetSize: 450000, // in bytes
    },
  },

  ...
]);

上述配置限制了bundles的entry和asset的文件大小，如果超过设置值，构建将报错并取消build过程，否则报错不会出现并且build成功。

压缩Javascript.

压缩代码的目的是将代码体积变小一些。压缩代码的靠谱方式就是重写的同时不会导致代码（功能）失效，好的方式比如：对变量重命名和删除无效代码段。

我么可以使用webpack -p 即 --optimize-minimize 来压缩代码，这个命令的底层调用的 UglifyJsPlugin 插件，由于_UglifyJS _不支持ES6语法，针对浏览器使用 _Babel _ 和 babel-preset-env 的情况下还是会出问题，因此我们需要另辟蹊径了。

babili是由_babel_团队维护的一个压缩器(minifier)--支持ES6甚至更新的特性，在webpack中我们可以通过 babili-webpack-plugin来运用该工具。

npm下载该插件

npm install babili-webpack-plugin --save-dev

在_webpack.parts.js_中定义该插件使用

const BabiliPlugin = require('babili-webpack-plugin');
...
exports.minifyJavaScript = () => ({
  plugins: [
    new BabiliPlugin(),
  ],
});

该插件功能强大，但是我们只需要能切换source map就足够了。接下来我们在_webpack.config.js_中应用上面的插件定义：

const productionConfig = merge([
  ...
  parts.clean(PATHS.build),
  parts.minifyJavaScript(),
  ...
]);

鉴于该插件的使用导致了更多的工作，所以构建时间更长，但是好处是明显的：性能预算中的超出size大小的限制取消了，并且构建出的bundle体积减小了许多。更过设置可以参考_babili-webpack-plugin_ 和Babili 官方文档，其中包含注释代码的配置项。

更多关于压缩js的webpack插件见该原文链接！

压缩CSS.

_css-loader_可以通过cssnano来压缩代码，前提是你必须明确的配置 minimize 参数(options) 你也可以在query后面加上 _cssnano特定参数_来定制化更过功能。
clean-css-loader可以使用非常流行的css压缩器clean-css来压缩css。
_ optimize-css-assets-webpack-plugin_能够分组压缩css代码，并且可以消除_ExtractTextPlugin _导致的重复性的css代码。

其中_ optimize-css-assets-webpack-plugin_是这几个里面的最好方案。首先下载该插件：

npm install optimize-css-assets-webpack-plugin cssnano --save-dev

在_webpack.parts.js_中定义该插件的配置：

...
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const cssnano = require('cssnano');
...
exports.minifyCSS = ({ options }) => ({
  plugins: [
    new OptimizeCSSAssetsPlugin({
      cssProcessor: cssnano,
      cssProcessorOptions: options,
      canPrint: false,
    }),
  ],
});

在_webpack.config.js_中使用该插件的定义：

const productionConfig = merge([
  ...
  parts.minifyJavaScript(),
  parts.minifyCSS({
    options: {
      discardComments: {
        removeAll: true,
      },
      // Run cssnano in safe mode to avoid
      // potentially unsafe transformations.
      safe: true,
    },
  }),
  ...
]);

跑一下npm run build，css体积变小了

转载于:https://my.oschina.net/u/3554461/blog/994894