webpack4之打包分析

发表于 | 分类于


官方打包分析

github

配置
1
2
3
4
// package.json
"scripts": {
    "dev-build": "webpack  --profile --json > stats.json --config ./build/webpack.dev.js" // 将打包的一些描述放置在stats.json中
  },
分析

地址
其他分析工具

PWA

当服务器挂掉的时候，可以通过本地缓存获取资源，让页面能正常显示

配置
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
# npm i -D workbox-webpack-plugin
# npm i -D http-server // 用来开启本地服务，模拟测试pwa是否成功

// package.json
{
  "name": "ethan-methods",
  "version": "1.0.0",
  "description": "",
  "main": "./dist/library.js",
  "scripts": {
    "start": "http-server dist", // 在文件夹dist目录下开启http服务
    "build": "webpack"
  }
}

// webpack.prod.js
const path = require('path')
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
const workboxWebpackPlugin = require('workbox-webpack-plugin')

module.exports = {
  plugins: [
    new CleanWebpackPlugin(),
    new workboxWebpackPlugin.GenerateSW({ // 设置pwa
      clientsClaim: true,
      skipWaiting: true
    })
  ]
}