Fork me on GitHub

webpack 实践与优化

字数统计: 2.8k字   |   阅读时长≈ 11分

如何删除项目中没有使用到的 package

1
2
3
4
5
6
7
8
9
10
$ npm install depcheck -g

$ depcheck

Unused dependencies
* underscore
Unused devDependencies
* jasmine
Missing dependencies
* lodash

查看 node_modules(某一文件夹) 的体积有多大

du (disk usage) 命令可以查看磁盘的使用情况，从它可以看出来文件及目录的大小

1
2
3
4
# -d 搜索深度，0 指当前目录
# -h 以可读性的方式显示大小
$ du -hd 0 node_modules
132M    node_modules

同理，可以使用以下命令查看 node_modules 下每个目录所占的大小

1
$ du -hd 1 node_modules

optionalDependencies 的使用场景是什么

当一个包是可依赖可不依赖时，可采用 optionalDependencies，但需要在代码中做好异常处理。

如 chokidar (opens new window)对 fsevents 的引入

1
2
3
4
5
6
7
8
9
10
11
{
  "optionalDependencies": {
    "fsevents": "~2.1.2"
  }
}
let fsevents;
try {
  fsevents = require("fsevents");
} catch (error) {
  if (process.env.CHOKIDAR_PRINT_FSEVENTS_REQUIRE_ERROR) console.error(error);
}

前端性能分析工具

  1. lighthouse: 可在 chrome devtools 直接使用，根据个人设备及网络对目标网站进行分析，并提供各种建议
  2. webpagetest: 分布式的性能分析工具，可在全球多个区域的服务器资源为你的网站进行分析，并生成相应的报告

dependencies 与 devDependencies 有何区别

对于业务代码而讲，它俩区别不大

  • 当打包时，依靠的是 Webpack/Rollup 对代码进行模块依赖分析，与该模块是否在 dep/devDep 并无关系，只要在 node_modules 上能够找到该 Package 即可。

  • 生产依赖会随着包一起下载，开发依赖不会，npm i –production 可以只下载生产依赖

对于库 (Package) 开发而言，是有严格区分的

确认项目是否引用某个依赖

1
yarn list | grep xxx

为项目指定node版本号

这属于项目质量问题

1
2
3
4
5
6
// package.json
{
  "engines": {
    "node": ">=14.0.0"
  }
}

版本号 设置

  • major: 当你发了一个含有 Breaking Change 的 API
  • minor: 当你新增了一个向后兼容的功能时
  • patch: 当你修复了一个向后兼容的 Bug 时

npm 钩子函数, 生命周期

再执行一个脚本时，前置，后置钩子函数执行。npm 脚本生命周期

生命周期

1
2
3
4
5
6
prepublishOnly
prepack
prepare
postpack
publish
postpublish

钩子函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// pre和post

pre 为前置钩子函数


post 为后置钩子函数

// package.json
{
    "script": {
        "build": "npm run build",
        "prebuild": "", // npm run build 之前执行
            "postbuild": "",// npm run build 之后执行
    }
}

webpack 分包

webpack 中提供了方案 4.0 之前是：CommonsChunkPlugin 4.0 后是 optimization.splitChunks

引入 BFF 层

BFF 全称 Backend For Frontend，一般指在前端与服务器端搭建一层由前端维护的 Node Server 服务，具有以下好处

  1. 数据处理。对数据进行校验、清洗及格式化。使得数据更与前端契合
  2. 数据聚合。后端无需处理大量的表连接工作，第三方接口聚合工作，业务逻辑简化为各个资源的增删改查，由 BFF 层聚合各个资源的数据，后端可集中处理性能问题、监控问题、消息队列等
  3. 权限前移。在 BFF 层统一认证鉴权，后端无需做权限校验，后端可直接部署在集群内网，无需向外网暴露服务，减少了后端的服务度。

但其中也有一些坏处，如以下

  1. 引入复杂度，新的 BFF 服务需要一套基础设施的支持，如日志、异常、部署、监控等

压缩前端 js 的体积

  1. terser (opens new window)或者 uglify (opens new window)，及流行的使用 Rust 编写的 swc 压缩混淆化 JS。
  2. gzip 或者 brotli 压缩，在网关处(nginx)开启
  3. 使用 webpack-bundle-analyzer 分析打包体积，替换占用较大体积的库，如 moment -> dayjs
  4. 使用支持 Tree-Shaking 的库，对无引用的库或函数进行删除，如 lodash -> lodash/es
  5. 对无法 Tree Shaking 的库，进行按需引入模块，如使用 import Button from 'antd/lib/Button'，此处可手写 babel-plugin 自动完成，但不推荐
  6. 使用 babel (css 为 postcss) 时采用 browserlist，越先进的浏览器所需要的 polyfill 越少，体积更小
  7. code spliting，路由懒加载，只加载当前路由的包，按需加载其余的 chunk，首页 JS 体积变小 (PS: 次条不减小总体积，但减小首页体积)
  8. 使用 webpack 的 splitChunksPlugin，把运行时、被引用多次的库进行分包，在分包时要注意避免某一个库被多次引用多次打包。此时分为多个 chunk，虽不能把总体积变小，但可提高加载性能 (PS: 此条不减小总体积，但可提升加载性能)

按需加载

Vue

这种方式下一个组件生成一个js文件

1
2
3
4
5
6
7
8
9
10

const router = new VueRouter({
  router: [
    {
      path: '/login',
      name: 'Login',
      component: resolve => require(['../components/Login'], resolve)
    }
  ]
})

ES6的import()方法

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
30
31
32
33
// 这种方式下, 没有指定webpackChunkName, 每个组件会打包成一个js文件
const router = new VueRouter({
  router: [
    {
      path: '/login',
      name: 'login',
      component: () => import('../pages/components/Login')
    },
    {
      path: 'layout',
      name: 'login',
      component: () => import('../pages/components/Layout')
    }
  ]
})

export default router
// 这种方式下, 指定了webpakeChunkName, 多个组件会合并成一个js文件
const router = new VueRouter({
  router: [
    {
      path: 'login',
      name: 'Login',
      component: () => import(/* webpakeChunkName: demo */ '../pages/components/Login')
    },
    {
      path: 'layout',
      name: 'layout',
      component: () => import(/* webpakeChunkName: demo */ '../pages/components/Layout')
    }
  ]
})
export default router

webpake提供的resolve + require.ensure()

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// 这种情况下, 多个路由指定相同的chunkNmae会合并打包成一个js文件
const router = new VueRouter({
  router: [
    {
      path: 'login',
      name: 'name',
      component: resolve => require.ensure([], () => resolve(require('../pages/components/Login')), 'demo')
    },
    {
      path: 'layout',
      name: 'layout',
      component: resolve => require.ensure([], () => resolve(require('../pages/components/Layout')), 'demo')
    }
  ]
})
export default router

组件的按需加载

1
2
3
4
5
6
7
8
9
10
<script>
  export default {
    data () {
      return {}
    },
    components: {
      'helloWord': resolve => {require(['../components/test.vue']), resolve}
    }
  }
</script>

导入组件的懒加载

1
2
3
import Home from '@/pages/home/index.vue' // es6提供的import方法
const Home = () => import('@/pages/home/index.vue') // 懒加载的方法
const Home = resolve => require(['@/pages/home/index.vue'], resolve) // 懒加载的方法

代码压缩

webpack4内置了uglifyjs-webpack-plugin,在生产模式默认开启这个插件

  • css: optimize-css-assets-webpack-plugin

  • js: uglifyjs-webpack-plugin

  • html: html-webpack-plugin

代码分割

vue.config.js

1
2
3
4
5
6
chainWebpack: config=>{
	config.optimization.minimize(true)// 开启压缩js代码(默认true)
	config.optimization.splitChunks({ // 开启代码分割
        chunks: 'all'
      }
}

CDN 优化

内网暂不考虑

gzip 加速

使用 compression-webpack-plugin 压缩代码

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
const CompressionWebpackPlugin = require('compression-webpack-plugin');

// 是否为生产环境
const isProduction = process.env.NODE_ENV !== 'development';
module.exports = {
  productionSourceMap: false,
  configureWebpack: config => {
      // 生产环境相关配置
      if (isProduction) {
        //gzip压缩
        const productionGzipExtensions = ['html', 'js', 'css']
        config.plugins.push(
            new CompressionWebpackPlugin({
                filename: '[path].gz[query]',
                algorithm: 'gzip',
                test: new RegExp(
                    '\\.(' + productionGzipExtensions.join('|') + ')$'
                ),
                threshold: 10240, // 只有大小大于该值的资源会被处理 10240
                minRatio: 0.8, // 只有压缩率小于这个值的资源才会被处理
                deleteOriginalAssets: false // 删除原文件
            })
        )
    }
}
};

还需要配置nginx

1
2
3
4
5
6
7
8
9
10
11
server {
        listen       80;
        server_name  localhost;
        gzip on;
		gzip_static on;    
		gzip_types text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript;
		gzip_proxied  any;
		gzip_vary on;
		gzip_comp_level 6;
		gzip_buffers 16 8k;
}

打包时 ::v-deep 语法报错

//报错

1
2
3
4
5
<style lang="scss" scoped>
  ::v-deep .demo{
    background: yellow;
  }
</style>

//正确

1
2
3
4
5
<style lang="scss" scoped>
  :deep(.demo){
    background: yellow;
  }
</style>

首屏加载时间

  1. 对于 pv 量比较高的页面，比如 b 站等流量图也比较大的，采用 ssr 采用 ssr 如何优化性能
    • 性能瓶颈在于 react-dom render/hydrate 和 server 端的 renderToString
    • 尽量减少 dom 结构， 采用流式渲染，jsonString 一个对象，而不是 literal 对象
    • server 去获取数据
    • 不同情况不同分析，减少主线程阻塞时间
    • 减少不必要的应用逻辑在服务端运行
  2. 减少依赖和包的体积
    • 利用 webpack 的 contenthash 缓存
    • 重复依赖包处理，可以采用 pnpm
    • 采用 code splitting，减少首次请求体积
    • 减少第三方依赖的体积
  3. FP (First Paint) 首次绘制 FCP (First Contentful Paint) 首次内容绘制 LCP (Largest Contentful Paint) 最大内容渲染 DCL (DomContentloaded) FMP(First Meaningful Paint) 首次有效绘制 L (onLoad) TTI (Time to Interactive) 可交互时间 TBT (Total Blocking Time) 页面阻塞总时长 FID (First Input Delay) 首次输入延迟 CLS (Cumulative Layout Shift) 累积布局偏移 SI (Speed Index) 一些性能指标可以监控性能

4.网络 prefetch cdn

前端　小图片转　base64

减少请求

webpack 4.0

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// yarn add -D url-loader

module: {
  rules: [
       {
        test: /\.(jpeg|jpg|png|svg|gif)$/,
        use: {
          loader: 'url-loader', // 默认使用的是es6模块
          options: { // 配置 
            esModule: false, // 使用common.js规范
            outputPath: 'images', // 输出的文件目录
            name: 'images/[contenthash:4].[ext]',
            limit: 20*1024 // 小于20k转为base64
          }
        }
      }
  ]
}

vue-cli

1
2
3
4
5
6
7
8
9
10
11
12
chainWebpack: (config) => {
    if (env !== 'development') {
      config.module
        .rule('images')
        .test(/\.(jpg|png|gif)$/)
        .set('parser', {
          dataUrlCondition: {
            maxSize: 10000 * 1024, // 10KiB 大小内的图片转base64
          },
        })
    }
}

browserslist

根据提供的目标浏览器的环境来，智能添加css前缀，js的polyfill垫片,来兼容旧版本浏览器。避免不必要的兼容代码，以提高代码的编译质量。

Browserslist 这个东西单独是没用的，（补充: 在vue官方脚手架中，browserslist字段会被 @babel/preset-env 和 Autoprefixer 用来确定需要转译的 JavaScript 特性和需要添加的 CSS 浏览器前缀。2019-7-22）下面的搭配的工具列表：

组件 功能
Autoprefixer postcss添加css前缀组件
postcss-preset-env 编译预设环境 智能添加polyfill垫片代码
Babel
eslint-plugin-compat
stylelint-no-unsupported-browser-features
postcss-normalize

了解更多请看这个list

或者npx browserslist

1
2
3
4
5
6
7
8

{   // package.json
  "browserslist": [         // 注意：是一个数组对象
  		"> 1%",
		"last 2 versions"
  ]
}

语法说明

例子 说明

1% 全球超过1%人使用的浏览器
5% in US 指定国家使用率覆盖
last 2 versions 所有浏览器兼容到最后两个版本根据CanIUse.com追踪的版本
Firefox ESR 火狐最新版本
Firefox > 20 指定浏览器的版本范围
not ie <=8 方向排除部分版本
Firefox 12.1 指定浏览器的兼容到指定版本
unreleased versions 所有浏览器的beta测试版本
unreleased Chrome versions 指定浏览器的测试版本
since 2013 2013年之后发布的所有版本

一些常用的查询语法

根据用户份额:

  • > 5%: 在全球用户份额大于 5% 的浏览器
  • > 5% in CN: 在中国用户份额大于 5% 的浏览器

根据最新浏览器版本

  • last 2 versions: 所有浏览器的最新两个版本
  • last 2 Chrome versions: Chrome 浏览器的最新两个版本

不再维护的浏览器

  • dead: 官方不在维护已过两年，比如 IE10

浏览器版本号

  • Chrome > 90: Chrome 大于 90 版本号的浏览器

扫一扫，分享到微信

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia-plus根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

侠客行
作者：李白
赵客缦胡缨，吴钩霜雪明。
银鞍照白马，飒沓如流星。
十步杀一人，千里不留行。
事了拂衣去，深藏身与名。
闲过信陵饮，脱剑膝前横。
将炙啖朱亥，持觞劝侯嬴。
三杯吐然诺，五岳倒为轻。
眼花耳热后，意气素霓生。
救赵挥金槌，邯郸先震惊。
千秋二壮士，烜赫大梁城。
纵死侠骨香，不惭世上英。
谁能书阁下，白首太玄经。