【webpack5修行之道】第12篇：性能优化-代码分隔

上一篇： 【webpack5修行之道】第11篇：性能优化-treeshaking

 

修改webpack.config.js

const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const { resolve } = require('path')

module.exports = {
  mode: 'production',
  entry: './src/index.js',
  output: {
    path: resolve(__dirname, 'build'),
    filename: 'js/[name].[chunkhash:10].js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'eslint-loader',
        enforce: 'pre',
        options: {
          fix: true
        }
      },
      {
        oneOf: [
          {
            test: /\.js$/,
            exclude: /node_modules/,
            loader: 'babel-loader',
            options: {
              presets: [
                ['@babel/preset-env']
              ]
            }
          },
          {
            test: /\.css$/,
            use: [{ loader: MiniCssExtractPlugin.loader, options: { publicPath: '../' } }, 'css-loader']
          },
          {
            test: /\.less$/,
            use: [{ loader: MiniCssExtractPlugin.loader, options: { publicPath: '../' } }, 'css-loader', 'less-loader']
          },
          {
            test: /\.(png|jpg|jpeg|gif|bmp)$/,
            loader: 'url-loader',
            options: {
              limit: 8 * 1024,
              outputPath: 'imgs'
            }
          },
          {
            test: /\.html$/,
            loader: 'html-loader',
            options: {
              esModule: false
            }
          },
          {
            exclude: /\.(css|js|html|json|less|png|jpg|gif)$/,
            loader: 'file-loader',
            options: {
              name: 'imgs/[contenthash:10].[ext]'
            }
          }
        ]
      }

    ]
  },
  plugins: [
    new CleanWebpackPlugin(),
    new MiniCssExtractPlugin({
      filename: 'css/[contenthash:10].css'
    }),
    new HtmlWebpackPlugin({
      template: resolve(__dirname, './index.html')
    })
  ],
  devServer: {
    port: 8282,
    hot: true
  }
}

我们先安装一个jquery， npm install -S jquery

修改index.js引入jquery

import './index.css'
import { add } from './math'
import $ from 'jquery'

console.log(add(1, 2))
console.log($)

如果没有配置代码分隔，我们打包出来的包会将node_modules一起打包在一个js里，这样会造成包的体积过大，而且多个chunk里的代码都会重复

先编译打包： npm run build

我们看到js只有一个，jquery被打包进去了

如果我们配置代码分隔呢？修改webpack.config.js

再编译打包，

我们看到jquery已经被单独打包为一个文件了

为了看出他的作用，我们演示一下多入口的项目打包

修改webpack.config.js

然后分别都引入query

index.js如下

import './index.css'
import { add } from './math'
import $ from 'jquery'

console.log($)
console.log(add(1, 2))

math.js如下

import $ from 'jquery'

console.log($)

export function add (x, y) {
  return x + y + 3
}
export function say () {
  console.log('1')
}

删除代码分隔的配置，

然后打包，输出目录如下：

我们看到，两个js文件都将jquery打包进去了，而且体积都非常大

接下来我们将代码分隔的注释撤销

再打包，编译目录如下

可以看到，node_modules里的jquery被单独打包出去了，其他两个js的文件都复用了他，我们之前说讲了静态文件会缓存，

如果第一次请求了main.js，这次加载了query的包，下次我们再请求math.js的时候，jquery包就能从缓存里获取了

 

第二种方式：

通过js代码，让某个文件单独进行打包一个chunk

通过使用import导入，能让文件打包，从而实现代码分隔

修改index.js

动态引入math.js，然后运行编译命令

给这个chunk添加名字

再次打包，得到编译文件

这样就能让业务中的模块分开打包了

 

下一篇：  【webpack5修行之道】第13篇：性能优化-懒加载和预加载