自动清理构建目录产物

如果不做处理，输出目录中的文件会越来越多

npm script

可以通过npm scripts清理构建目录
image.png

webpack plugin配置

使用clean-webpack-plugin:默认删除output指定的输出目录
image.png
要注意的是这个插件使用的时候，要这样
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

PostCSS插件 autoprefixer自动补齐CSS3前缀

在package.json或者.xxxx文件中进行配置适配的浏览器。

或者直接在loader的plugin参数中传一个数组，require(autoprefixer)({overrideBrowserslist:[‘last 7 versions’]})来覆盖那两个文件之一之中的配置。

资源内联

代码层面：

  • 页面框架的初始化脚本
  • 上报相关打点
  • css内联避免页面闪动

请求层面： 减少HTTP网络请求数

  • 小图片或者字体内联

HTML和JS内联

raw-loader内联html

image.png

raw-loader 内联JS

image.png

CSS内联

  • 借助style-loader

image.png

  • html-inline-css-webpack-plugin

多页面打包通用方案

glob.sync()

source map

关键字

image.png
image.png

提取页面公共资源

html-webpack-externals-plugin

思路： 将React,react-dom基础包通过cdn引入，不进行打包

方法： 使用html-webpack-externals-plugin

image.png

SplitChunksPlugin

Webpack4内置的，替代CommonsChunkPlugin插件

image.png

  • chunks参数说明：

    • async异步引入的库进行分离(默认)
    • initial同步引入的库进行分离
    • all所有引入的库进行分离

  • test: 匹配出需要分离的包

image.png

  • 提取页面公共文件(比如某些被多个页面调用到的方法)

image.png
minChunks:设置最小引用次数
minSize：分离的包体积的大小