代码拆散

代码拆散办法有三种：

  • 入口终点：应用 entry 配置手动地拆散代码。
  • 避免反复：应用 SplitChunksPlugin 去重和拆散 chunk。
  • 动静导入：通过模块中的内联函数调用来拆散代码。

动静导入(dynamic imports)

  • import()
  • require.ensure

预取/预加载模块(prefetch/preload module)

webpack v4.6.0+ 增加了预取和预加载的反对。

在申明 import 时，应用上面这些内置指令，能够让 webpack 输入 "resource hint(资源提醒)"，来告知浏览器：

  • prefetch(预取)：未来某些导航下可能须要的资源
  • preload(预加载)：以后导航下可能须要资源

配置项重点详解

（1）mode: "pruduction"

  • 启用 minification(代码压缩) 和 tree shaking (usedExports:true)
  • 主动指定DefinePlugin：process.env.NODE_ENV === 'production'

（2）devtool

source map 简介

  • 生产环境：source-map
  • 开发环境：inline-source-map

（3）optimization

  • splitChunks
splitChunks: {  chunks: 'all', // 提取公共模块 loadash  // 将第三方库(library)（例如 lodash 或 react）提取到独自的 vendor chunk 文件中，是比拟举荐的做法  // 利用 client 的长效缓存机制，命中缓存来打消申请，并缩小向 server 获取资源，同时还能保障 client 代码和 server 代码版本统一。  cacheGroups: {    vendor: {      test: /[\\/]node_modules[\\/]/,      name: 'vendors',      chunks: 'all'    }  }},
  • runtimeChunk
runtimeChunk: 'single' // 提取疏导模板 将 runtime 代码拆分为一个独自的 chunk

（5）output

// filename: '[name].[contenthash].js', // content hash 内容变动才会变动filename: 'webpack-numbers.js', path: path.resolve(__dirname, 'dist'),// 裸露 library 这是库名称 import from 'webpackNumbers'library: 'webpackNumbers', libraryTarget: 'umd'

（6）plugins

  • HashedModuleIdsPlugin
const { HashedModuleIdsPlugin } = require('webpack');plugins: [    // 不会因模块减少和缩小导致的模块内容变动，减少长缓存命中机制    new HashedModuleIdsPlugin()],
  • BundleAnalyzerPlugin

剖析打包代码

const {BundleAnalyzerPlugin} = require('webpack-bundle-analyzer');plugins: [    new BundleAnalyzerPlugin()]