关于html:Webpack-之常用配置二

作者：余韵之

Tree Shaking

1、什么是 Tree Shaking

示意 只引入须要的模块里的代码，没有应用的是不会打包

import {add} from './math.js';
add(1, 2);

math.js 里有两个办法，如果应用了 Tree Shaking 那么只会打包 add 办法

2、如何配置

webpack.prod.js 生产环境不须要配置这个，即便配置了这个也是无作用的。

optimization: { // 应用 tree shaking
     usedExports: true
}

package.json

"sideEffects": false, // 示意对所有的模块都要应用 tree shaking
"sideEffects":["@babel/polly-fill"，"*.css"] // 示意排除 @babel/polly-fill , 排除所有的 css 文件 其余 import 模块都应用 tree shaking

留神 如果是开发环境 development tree shaking 会不失效，因为调试的话 sourceMap 行数会不准，生产环境 production 就会失效

Production Development

1、如何切换开发环境和生产环境 webpack 配置

• 创立生产环境文件 ./build/webpack.prod.js
• 创立开发环境文件 ./build/webpack.dev.js
• 创立公共的代码文件 ./build/webpack.common.js

应用插件 webpack-merge 把配置文件合并

2、配置打包命令

package.json

"scripts": {
    "dev": "webpack-dev-server --config ./build/webpack.dev.js", // 启动热更新，抉择 dev 配置文件
    "build": "webpack --config ./build/webpack.prod.js" // 间接打包，走 prod 配置文件
}

Code Splitting

咱们为什么要做代码宰割呢？举个例子。

假如咱们引入了一个 lodash 第三方库，它的大小是 1MB，咱们的业务代码也有 1MB。此时不做任何解决最初打包生成一个 main.js 大小为 2MB。用户关上浏览器须要申请一个 2MB 的 main.js 文件。

import _ from "lodash";  // 假如 lodash 有 1MB

// 假如业务代码有 1MB
console.log(_.join(['a', 'a', 'c'],"---"))
console.log(_.join(['a', 'b', 'c'],"---"))

此时咱们批改业务代码

import _ from "lodash";  // 假如 lodash 有 1MB

// 假如业务代码有 1MB
console.log(_.join(['a', 'xxxxx', 'c'],"---"))
console.log(_.join(['a', 'b', 'c'],"---"))

从新打包，生成  main.js 2MB。用户须要从新拉取 2MB 的代码文件。这会使得加载工夫很慢，性能不够好。

所以有什么好的形式来解决这个问题呢？

第一种形式：同步形式

import _ from "lodash"  // 假如 lodash 有 1MB
window._ = _

// 假如业务代码有 1MB
console.log(_.join(['a', 'd', 'c'],"---"))
console.log(_.join(['a', 'b', 'c'],"---"))

webpack.config.js

entry: {
  lodash: './src/lodash.js',
  main: './src/index.js'
}

• 首次拜访页面，加载 main.js: 被拆成 vendor~lodash.js 1MB 和 业务代码 main.js 1MB
• 此时批改了业务代码，用户是不须要从新加载 vendor~lodash 代码的。只须要从新加载 main.js

长处 ：能够无效提进步代码运行的速度、用户体验进步、性能进步
毛病：须要手动拆分页面的代码，不够智能

第二种形式: 同步形式

webpack.config.js

optimization:{
      splitChunks:{chunks:'all'}
}

import _ from "lodash";  // 假如有 1MB

console.log(_.join(['a', 'd', 'c'],"---"))
// 此处省略 10 万行业务逻辑
console.log(_.join(['a', 'b', 'c'],"---"))

长处：相比第二种形式，能够主动拆分，打包引入 main.js 和 vendors~main.js

第三种形式：异步形式

装置插件

yarn add -D babel-plugin-dynamic-import-webpack

.babelrc

"plugins": ["babel-plugin-dynamic-import-webpack"]

异步代码如下

function getComponent(){return import('lodash').then(({default:_})=>{let element = document.createElement('span')
    element.innerHTML = _.join(['x','y'],'-');
    return element;
  })
}

getComponent().then(ele=>{document.body.appendChild(ele)
})

留神：异步代码 import 引入的模块，无需配置额定的 webpack.config.js，会主动引入

SplitChunksPlugin 配置参数详情

1、webpackChunkName

批改第三方打包的文件的名字

装置官网的依赖

npm install --save-dev @babel/plugin-syntax-dynamic-import

.babelrc

"plugins": ["@babel/plugin-syntax-dynamic-import"]

我的项目代码里增加名字 /_ webpackChunkName:”lodash” _/

function getComponent(){return import(/* webpackChunkName:"lodash" */'lodash').then(({default:_})=>{let element = document.createElement('span')
    element.innerHTML = _.join(['x','y'],'-');
    return element;
  })
}

getComponent().then(ele=>{document.body.appendChild(ele)
})

留神：生成的代码文件为 ./dist/vendors~lodash.js

如果生成的代码文件不想退出 vendors~ , 而是间接 lodash.js

那么配置 webpack.config.js

optimization:{
  splitChunks:{
    chunks:'all',
    cacheGroups:{ // 示意打包的文件是否要带 vendors, 无论同步或者异步
        vendors:false,
        default:false
    }
  }
}

2、具体的 splitChunks 的参数性能

optimization: {
    splitChunks: {
      chunks: 'all', // async 示意只对异步代码宰割，initial 示意只对同步代码宰割，all 的话是所有同时会走到 cacheGroups.vendors
      minSize: 30000, // 示意最小模块大于 30000 个字节才会做代码宰割
      // maxSize: 50000, // 如果拆分的代码大小超过 50000, 会进行二次拆分，个别配置的比拟少
      minChunks: 1,// 引入几次才宰割打包，如果只引入 1 次就宰割，如果是 2 示意必须大于等于 2 次才做代码宰割
      maxAsyncRequests: 5,// 示意不能超过 5 个模块宰割，超过前面的模块就不宰割了
      maxInitialRequests: 3,// 示意整个网站首页或入口文件 如果做代码宰割不超过 3 个
      automaticNameDelimiter: '~', // 组和文件名链接符号 vendors~main.js
      name: true,// 示意要更新名字，个别是不须要扭转的
      cacheGroups: {
        vendors: {test: /[\\/]node_modules[\\/]/, // 如果在 node_modules 里，那么会打包到 vendors.js
          priority: -10, // 比方 jquery 合乎 vendors 也合乎 default，值越大，阐明优先级更大
          filename:'vendors.js' // 示意所有的第三方打包到一个叫 vendors.js 文件
        },
        default: { // 如果是引入本人在我的项目里写的模块引入走这里，非 node_modules
          // minChunks: 2,
          priority: -20,// 值越大，阐明优先级更大
          reuseExistingChunk: true, // 如果代码曾经打包过，反复援用时就不会再宰割打包，而是复用之前的。filename: 'common.js'
        }
      }
    }
  },

这里要 留神

• 如果是引入同步代码不会立即宰割，而是会走 cacheGroups，依据理论状况来宰割

对 Electron 感兴趣？请关注咱们的开源我的项目 Electron Playground，带你极速上手 Electron。

咱们每周五会精选一些有意思的文章和音讯和大家分享，来掘金关注咱们的 晓前端周刊。

咱们是好将来 · 晓黑板前端技术团队。
咱们会常常与大家分享最新最酷的行业技术常识。
欢送来 知乎、掘金、Segmentfault、CSDN、简书、开源中国、博客园 关注咱们。