Webpack 的高级概念

Tree Shaking 

Develoment 和 Production 模式的区分打包

方式一：不同模式用不同配置文件打包

1.安装webpack-merge合并多个配置文件

npm install webpack-merge -d

2.webpack-common.js做公共的配置

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports = {
  entry: {
    main: './src/index.js'
  },
  module: {
    rules: [
      {
        test: /.jpg$/,
        use: {
          loader: 'file-loader',
          options: {
            //占位符
            name: "[name].[ext]",
            outputPath: './img',
            limit: 2048
          }
        }
      },
      {
        test: /.scss$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              //通过import引入的scss文件，也走下班2个loader
              importLoaders: 2,
              //开启模块化
              modules: true
            }
          },
          'sass-loader',
          'postcss-loader'
        ]
      },
      {
        test: /.css$/,
        use: [
          'style-loader',
          'css-loader',
          'postcss-loader'
        ]
      },
      {
        test: /.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader'
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    }),
    new CleanWebpackPlugin()
  ],
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist')
  }
}

3.webpack-dev.js做的Develoment 环境的配置

const webpack = require('webpack')
const { merge } = require('webpack-merge')
const commonConfig = require('./webpack-common.js')
const devConfig = {
  mode: 'development',
  devtool: 'cheap-module-eval-source-map',
  devServer: {
    contentBase: './dist/',//开启服务器的目录
    open: true,//自动打开一个浏览器，
    hot: true,
    proxy: {
      '/api': 'http://localhost:3000'
    },
  },
  optimization: {
    usedExports: true
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin()
  ],
}
module.exports = merge(commonConfig, devConfig)

4.webpack-prod.js做的Production 环境的配置

const { merge } = require('webpack-merge')
const commonConfig = require('./webpack-common.js')
const prodConfig = {
  mode: 'production',
  devtool: 'cheap-module-source-map',
}
module.exports = merge(commonConfig, prodConfig)

5.pakeage.json 利用不同的打包文件打包

 "scripts": {
    "dev": "webpack-dev-server --config webpack-dev.js",
    "build": "webpack --config webpack-prod.js"
  },
  "sideEffects": [
    "*.css"
  ]

方式二：不同模式用不同的环境变量打包

1.安装webpack-merge合并多个配置文件

npm install webpack-merge -d

3.webpack-dev.js做的Develoment 环境的配置

const webpack = require('webpack')
// const { merge } = require('webpack-merge')
const commonConfig = require('./webpack-common.js')
const devConfig = {
...
}
module.exports = devConfig
// module.exports = merge(commonConfig, devConfig)

4.webpack-prod.js做的Production 环境的配置

// const { merge } = require('webpack-merge')
const commonConfig = require('./webpack-common.js')
const prodConfig = {
  ...
}
// module.exports = merge(commonConfig, prodConfig)
module.exports = prodConfig

2.webpack-common.js做公共的配置,并且根据环境变量，到处不同的merge config

...
const { merge } = require('webpack-merge')
const devConfig = require('./webpack-dev.js')
const prodConfig = require('./webpack-prod.js')
const commonConfig = {
  ...
}
//关键代码
module.exports = function (env) {
  if (env && env.production) {
    return merge(commonConfig, prodConfig)
  } else {
    return merge(commonConfig, devConfig)
  }
}

5.pakeage.json 不再利用不同的打包文件打包

不再利用不同的打包文件打包，而都是webpack-common.js。build的时候传了环境变量--env.production。

"scripts": {
    "dev": "webpack-dev-server --config webpack-common.js",
    "build": "webpack --env.production --config webpack-common.js",
    "dev-build": "webpack --profile --json > stats.json --config webpack-common.js "
  },

来源：Develoment 和 Production 模式的区分打包 - 哥哦狗子 - 博客园 (cnblogs.com)

webpack优化之code splitting （代码分离）

代码分割（code splitting）是webpack相当重要的一个特性。它可以让代码分割到不同的文件（bundle）中，以便按需或者并行加载这些文件。代码分割可以得到更小的文件，控制资源加载的优先级。如果使用得当，更是可以优化加载的时间。

这里先看一个使用 vue-cli 构建的实际项目打包出来的 bundle 都有什么

这里只关注 js 文件。可以看到除了上篇文章提到的 app、vendor、manifest文件，还有从0到7开头的 js 文件。这几个以数字开头的 js 文件是哪里来的，又有什么作用呢。这篇文章就是解答这个问题。

代码分割的方法

官网给出了三种常用的代码分割的方法

• Entry Points：入口文件设置的时候可以配置
• CommonsChunkPlugin：上篇文章讲了一下应用，更详细的信息可以查看官网
• Dynamic Imports：动态导入。通过模块的内联函数调用来分割，这篇文章主要会结合 vue-router 分析一下这种方式

Entry Points

这种是最简单也是最直观的代码分割方式，但是会存在一些问题。方法就是在 webpack 配置文件中的 entry 字段添加新的入口：

const path = require('path');

module.exports = {
  entry: {
    index: './src/index.js',
    another: './src/another-module.js'
  },
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
};

将生成下面的构建结果：

看上去是分割出来了一个新的 bundle。但是会有两个问题：

• 如果入口 chunks 之间包含重复的模块，那些重复模块都会被引入到各个 bundle 中
• 这种方法不够灵活，并且不能将核心应用程序逻辑进行动态拆分代码

举个例子，index 和 another 这两个入口文件都包含了 lodash 这个模块，那分割出来的两个 bundle 都会包含 lodash 这个模块，冗余了。解决这个问题就需要 CommonsChunkPlugin 插件。

CommonsChunkPlugin

这个插件可以抽取所有入口文件都依赖了的模块，把这些模块抽取成一个新的bundle。具体用法如下：

const path = require('path');

module.exports = {
  entry: {
    index: './src/index.js',
    another: './src/another-module.js'
  },
  plugins: [
    new webpack.optimize.CommonsChunkPlugin({
      name: 'common' // bundle 名称
    })
  ],
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
};

构建结果如下：

 

可以看到，原来的 index 和 another 两个bundle的体积大大的减小了。并且多了一个574k的 common bundle。这个文件就是抽离出来的 lodash 模块。这样就可以把业务代码，和第三方模块代码分割开了。

CommonsChunkPlugin 在 vue-cli 中的使用可以查看上篇文章。其他更高级的用法可以查看官网。

Dynamic Imports

Webpack 的动态分割主要方式是使用符合 ECMAScript 提案的 import() 语法。语法如下

import('path/to/module') -> Promise

传入模块的路径，import() 会返回一个Promise。这个模块就会被当作分割点。意味着这个模块和它的子模块都会被分割成一个单独的 chunk。并且，在 webpack 配置文件的 output 字段，需要添加一个 chunkFileName 属性。它决定非入口 chunk 的名称。

// vue-cli 生成的webpack.prod.conf.js
// 注意 output 的 chunkFilename 属性
// 这种写法分割出来的 bundle 会以 id + hash 的命名方式
// 比如 1.32326e28f3acec4b3a9a.js
output: {
  path: config.build.assetsRoot,
  filename: utils.assetsPath('js/[name].[chunkhash].js'),
  chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
},

这个动态代码分割功能是我们实现按需加载的前提。在 vue 的项目里，我们最终想要达到这样一个效果：

把每个路由所包含的组件，都分割成一个单独的 bundle
当路由被访问的时候才加载该路由对应的 bundle
第一个点通过上面的 import() 就已经可以实现了。要实现第二点，需要用到 vue 里面的异步组件特性。

Vue 允许将组件定义为一个工厂函数，异步地解析组件的定义。只在组件需要渲染时触发工厂函数，并且把结果缓存起来，用于后面的再次渲染。工厂函数的写法：

Vue.component('async-example', function (resolve, reject) {
  setTimeout(function () {
    // 将组件定义传入 resolve 回调函数
    resolve({
      template: '<div>I am async!</div>'
    })
  }, 1000)
})

在工厂函数中可以返回 Promise，而 import() 也是返回 Promise 的，这样就把异步组件和 import() 结合起来了。使用 import() 后，工厂函数的写法：

Vue.component('async-webpack-example',
  // 该 `import` 函数返回一个 `Promise` 对象。
  () => import('./my-async-component')
)

最后在 vue-router 的路由配置中，我们只需要这么写：

const router = new VueRouter({
  routes: [
    { path: '/login', component: () => import('@/views/login'), },
    { path: '/home', component: () => import('@/views/home'), }
  ]
})

结合 Vue 的异步组件和 Webpack 的代码分割功能，在 vue-router 中，我们轻松实现了路由组件的按需加载加载。所以，文章开头的问题在这里就可以解答了。以0-7数字开头的 js 文件，就是每个路由对应的组件构建出来的 bundle。只有用户访问对应的路由时，才会加载相应的 bundle，提高页面加载效率。

SplitChunksPlugin配置参数详解

module.exports = {
  //...
  optimization: {
    splitChunks: {
      chunks: 'async', // 代码分割时对异步代码生效，all：所有代码有效，inital：同步代码有效
      minSize: 30000, // 代码分割最小的模块大小，引入的模块大于 30000B 才做代码分割
      maxSize: 0, // 代码分割最大的模块大小，大于这个值要进行代码分割，一般使用默认值
      minChunks: 1, // 引入的次数大于等于1时才进行代码分割
      maxAsyncRequests: 6, // 最大的异步请求数量,也就是同时加载的模块最大模块数量
      maxInitialRequests: 4, // 入口文件做代码分割最多分成 4 个 js 文件
      automaticNameDelimiter: '~', // 文件生成时的连接符
      automaticNameMaxLength: 30, // 自动生成的文件名的最大长度
      cacheGroups: {
        vendors: {
          test: /[\/]node_modules[\/]/, // 位于node_modules中的模块做代码分割
          priority: -10 // 根据优先级决定打包到哪个组里，例如一个 node_modules 中的模块进行代码
        }, // 分割，，既满足 vendors，又满足 default，那么根据优先级会打包到 vendors 组中。
        default: { // 没有 test 表明所有的模块都能进入 default 组，但是注意它的优先级较低。
          priority: -20, //  根据优先级决定打包到哪个组里,打包到优先级高的组里。
          reuseExistingChunk: true // //如果一个模块已经被打包过了,那么再打包时就忽略这个上模块
        }
      }
    }
  }
};

webpack Lazy Loading 懒加载

document.getElementById('btn').onclick = function() {
  // 预加载 prefetch：会在使用之前，提前加载js文件  
  // 预加载 prefetch：等其他资源加载完毕，浏览器空闲了，再偷偷加载资源
  import(/* webpackChunkName: 'test', webpackPrefetch: true */'./test').then(({ add }) => {
    console.log(add(10, 20));
  });
};

打包分析，Preloading, Prefetching

打包分析概念

当用webpack代码打包之后，可以借助打包分析的工具对打包生成的文件进行一定的分析，分析打包是否合理

分析工具：https://github.com/webpack/analyse

分析工具2：https://alexkuz.github.io/webpack-chart/

生成打包过程描述文件

把打包描述放置到stats.json里

"scripts": {
    "dev-build": "webpack --profile --json > stats.json --config ./build/webpack.dev.js",
    "dev": "webpack-dev-server --config ./build/webpack.dev.js",
    "build": "webpack --config ./build/webpack.prod.js"
  }

Preloading ，Prefetching

文档：https://webpack.js.org/guides/code-splitting#prefetchingpreloading-modules

prefetch：会等待核心代码加载完成后，页面带宽空闲后再去加载prefectch对应的文件

preload：和主文件一起去加载

可以用prefetch来解决懒加载的用户体验问题

现在的前端性能优化，缓存不是最重要的点，最重要的是code coverage代码覆盖率

Webpack：CSS 文件的代码分割

 Webpack：CSS 文件的代码分割

webpack与浏览器缓存(Caching)

根据之前的配置，假设文件上传至服务器中，没有加hash，如果页面内容有更改，浏览器刷新的时候，请求的还是原先的文件，也就是浏览器的缓存，因为名字没有变。现在我们在上线的webpack配置中加上hash

output:{
　　filename: '[name].[contenthash].js',
　　chunkFilename: '[name].[contenthash].js',
}

这个时候打包出来的文件就有了hash值。只要文件内容不变，hash值就不变，内容变了才变。

如果打包失效，比如老版本的webpack4。这个时候加一个配置参数

optimization:{
　　runtimeChunk: {
　　　　name: 'runtime'
　　}
}

Webpack：Shimming 的作用

引入webpack.ProvidePlugin()解决：如果使用了一些版本比较老的模块如jquery、lodash，这些老模块的用法不是ES Module的使用方式，如果用webpack打包用这种模块会报错，为了解决这样的错误就要用到webpack.ProvidePlugin()