使用webpack进行图片压缩

• 要求：基于 Node 库的 imagemin 或者 tinypng API
• 使用：配置 image-webpack-loader

Imagemin的优点分析

• 有很多定制选项
• 可以引入更多第三方优化插件，例如pngquant
• 可以处理多种图片格式

Imagemin的压缩原理

tree shaking(摇树优化)

• 概念：1 个模块可能有多个方法，只要其中的某个方法使用到了，则整个文件都会被打到bundle 里面去，tree shaking 就是只把用到的方法打入 bundle ，没用到的方法会在uglify 阶段被擦除掉
• 使用：
  • webpack 默认支持，在 .babelrc 里设置 modules: false 即可
  • production mode的情况下默认开启
• 要求：
  • 必须是 ES6 的语法，CJS 的方式不支持
  • 需要tree shaking的模块代码是没有副作用的，否则tree shaking会失效
• Tree Shaking的使用和原理分析

缩小构建目标

• 目的：尽可能的少构建模块

• 比如 exclude 不解析相应的模块，目录。include 只解析解析相应的模块，目录

  1 2 3 4 5 6 7 8 9 10 11

  module: { rules: [ { test: /\.js$/, //?cacheDirectory=true 开启缓存 use: 'babel-loader?cacheDirectory=true',//使用babel-loader解析ES6 exclude: 'node_modules', include: 'src' } ] }

缓存

• 目的：提升二次构建速度
• 缓存思路：
  • babel-loader 开启缓存：提升二次解析速度
  • terser-webpack-plugin 开启缓存：提升二次压缩速度
  • 使用 cache-loader 或者 hard-source-webpack-plugin：用于缓存 webpack 内部模块处理的中间结果，提升二次模块转换速度

分包：设置 Externals

• 思路：将 react、react-dom 基础包通过 cdn 引入，不打入 bundle 中
• 方法：使用 html-webpack-externals-plugin

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

//在配置文件中添加HtmlWebpackExternalsPlugin插件
new HtmlWebpackExternalsPlugin({
    externals: [
        {
            module: 'react',
            entry: 'https://cdn.bootcss.com/react/15.6.1/react.js',
            global: 'React'
        },
        {
            module: 'react-dom',
            entry: 'https://cdn.bootcss.com/react/15.6.1/react-dom.js',
            global: 'ReactDOM'
        },
    ],
})