性能优化webpack【打包构建优化】

1.tree-sharking（无用代码删除）[terser-webpack-plugin 来处理 ]

作用：上下文未用到的代码（全局变量容易被 sharking）
实现基础： 基于es6 的import 语法 
优化：【防止全局变量被 sharking】package中的 sideEffects（忽略文件）【css不是es6的模块化方式写的】
注意bable默认配置的影响[bable 会把es6 转义成其他模块化语法]【模块化语法的转码 modules: false】

2.terser-webpack-plugin（js代码压缩）

减少js代码体积 比之前压缩更好 uglifyjs-webpack-plugin

3.作用域提升
依赖关系合并 减少代码体积，函数合并，提高执行效率

bable的modlu配置 需要false  因为也是基于es6的模块化依赖关系

4.webpack配置一般结合babel7

4.1按需引入polyfill 兼容低版本浏览器使用新功能  【但是  @bable/polyfill  过大 我们需要配置】

“useBuiltIns”: ''usage'

4.2辅助函数的复用 也是按需引入 （比如类函数的声明 有个辅助检查函数不会复用）

_classCallCheck()
使用babel/plugin-transfrom-runtime 插件优化
4.3根据目标浏览器转码
babel可以对转码要求进行设置 比如对市面占有率百分比的浏览器进行转码

presets: target browser :['> 0.25%']

二.webpack性能优化实战[打包速度优化 ]

1.打包慢 依赖优化 noparse

直接通知webpack有些比较独立的库不去解析
被忽略的库不能有import require define的引入 【没有外部的依赖 不能有 import default require】

例如 lodash 不需要递归解析 

noParse：/lodash/

rule:[]

2. DLLpulgin（动态链接库 动态引入）【主要是开发环境用  因为开发比较频繁 生产比较少发布】

避免打包时对不变的库重复构建

例如：react react-dom  只需要引入之前构建的

三，webpack代码拆分分散加载 快速首屏加载

前言：webpack会把我们工程打包成一个大的bundle

这样加载就比较慢 我们需要拆分 然后取我们先要用的

1.splitChunks（webpack插件）

one//把我们代码重复使用提取

two//业务逻辑和第三方依赖拆分 到两个bundle

实现：optimizations

1.第一步依赖拆分（业务代码与三方库拆分）
cacheGroups: {
          lodash: {
            name: 'lodash',
            test: /[\\/]node_modules[\\/]lodash[\\/]/,
            priority: 20
          },
          vue: {
            name: 'vue',
            test: /[\\/]node_modules[\\/]vue[\\/]/
          },
          vuex: {
            name: 'vuex',
            test: /[\\/]node_modules[\\/]vuex[\\/]/
          },
          'vue-router': {
            name: 'vue-router',
            test: /[\\/]node_modules[\\/]vue-router[\\/]/
          },
          'ant-design-vue': {
            name: 'ant-design-vue',
            test: /[\\/]node_modules[\\/]ant-design-vue[\\/]/
          },
          moment: {
            name: 'moment',
            test: /[\\/]node_modules[\\/]moment[\\/]/,
            priority: 40
          }
        }
2.公共代码拆分(提取)
common：{
  name: 'lodash',
  test: /[\\/]src[\\/]lodash[\\/]/,
  chunks： 'all'
}

chunks：’all‘ [动态静态引入都算数] ’initial‘ 同步加载 静态 ’aysnc‘异步加载 动态 【引入组件的方式】

动态加载改造（bundle过大）

import('./main').then(()=> {})

那么Vue3给我们提供了一个异步加载组件的api 【defineAsyncComponent】 defineAsyncComponent接受两种类型的参数：         类型一：工厂函数，该工厂函数需要返回一个Promise对象；         类型二：接受一个对象类型，对异步函数进行配置；

Vue3如何使用异步组件_vue3异步加载组件_new Future()的博客-CSDN博客

四。资源压缩（minification）html css js

terser压缩js

mini-css-extract-plugin 压缩css （先提取 让js与css不会互相影响 再压缩另外有个插件）

optimize-css-assets-plugin （去掉css中的注释）

 

htmlwebpackplugin-minify 压缩html

      minify: {

        removeComments: true,

        removeCommentsFromCDATA: true,

        collapseWhitespace: true,

        conservativeCollapse: false,

        collapseInlineTagWhitespace: true,

        collapseBooleanAttributes: true,

        removeRedundantAttributes: true,

        removeAttributeQuotes: false,

        removeEmptyAttributes: true,

        removeScriptTypeAttributes: true,

        removeStyleLinkTypeAttributes: true,

        useShortDoctype: true,

        minifyJS: true,

        minifyCSS: true

      },

五 网络资源的持久化缓存（提高再次访问 加快网页加载速度 增量式 平稳的更新过度）

1.网络资源的更新（发布部署后 资源差异化）
先拿到html  没有拿到js和css（有些资源使用是旧的资源）

解决在本地没问题 发布部署后出现问题

解决方法：静态资源后加hash 离散唯一的值（增量式的更新）【离散唯一的值】
 

output：{}

filename 没有按需加载的名称

chunkFilename  按需加载的名称

//css中独立使用文件名 避免同一个文件提取的 一个更改 另外一个也更改
[contenthash:8]

 

六性能分析工具(代码静态分析 每个bundle里面的体积)

1.stats分析与可视化  （webpack chart）

webpack --profile --json > stats.json

2.source-map-explorer 【js分析工具 是否需要优化】

3.speed-measure-plugin 【插件 loader 速度分析工具】