webpack中的optimization配置示例详解

吃肉小王子

webpack配置optimization

• minimizer
  
• runtimeChunk
  
• noEmitOnErrors
  
• splitChunks
  

主要就是根据不同的策略来分割打包出来的bundle。
本人项目中splitChunks配置如下：

1. module.exports = {
   
2.                     chainWebpack(config) {
   
3.                         config.when(process.env.NODE_ENV != 'development',
   
4.                             config => {
   
5.                                 config.optimization.splitChunks({
   
6.                                     chunks: 'all',
   
7.                                     cacheGroups: {
   
8.                                         // 第三方组件
   
9.                                         libs: {
   
10.                                             指定chunks名称
    
11.                                             name: 'chunk-libs',
    
12.                                             //符合组的要求就给构建venders
    
13.                                             test: /[\\/]node_modules[\\/]/,
    
14.                                             //priority:优先级：数字越大优先级越高，因为默认值为0，所以自定义的一般是负数形式,决定cacheGroups中相同条件下每个组执行的优先顺序。
    
15.                                             priority: 10,
    
16.                                             // 仅限于最初依赖的第三方
    
17.                                             chunks: 'initial'
    
18.                                         },
    
19.                                         elementUI: {
    
20.                                             // 将elementUI拆分为单个包
    
21.                                             name: 'chunk-elementUI',
    
22.                                             // 重量需要大于libs和app，否则将打包到libs或app中
    
23.                                             priority: 20,
    
24.                                             // 为了适应cnpm
    
25.                                             test: /[\\/]node_modules[\\/]_?element-ui(.*)/
    
26.                                         },
    
27.                                         //公共组件
    
28.                                         commons: {
    
29.                                             name: 'chunk-commons',
    
30.                                             // can customize your rules
    
31.                                             test: resolve('src/components'),
    
32.                                             minChunks: 3,
    
33.                                             priority: 30,
    
34.                                             //这个的作用是当前的chunk如果包含了从main里面分离出来的模块，则重用这个模块，这样的问题是会影响chunk的名称。
    
35.                                             reuseExistingChunk: true,
    
36.                                             //最大初始化加载次数，一个入口文件可以并行加载的最大文件数量，默认3
    
37.                                             maxInitialRequests: 3,
    
38.                                             //表示在分离前的最小模块大小，默认为0，最小为30000
    
39.                                             minSize: 0
    
40.                                         },
    
41.                                         echarts: { // split echarts libs
    
42.                                             name: 'chunk-echarts',
    
43.                                             test: /[\\/]node_modules[\\/]_?echarts(.*)/,
    
44.                                             priority: 40,
    
45.                                             chunks: 'async',
    
46.                                             reuseExistingChunk: true
    
47.                                         },
    
48.                                         monaco: { // split monaco libs
    
49.                                             name: 'chunk-monaco',
    
50.                                             test: /[\\/]node_modules[\\/]_?monaco(.*)/,
    
51.                                             priority: 40,
    
52.                                             chunks: 'async',
    
53.                                             reuseExistingChunk: true
    
54.                                         },
    
55.                                         'project-components': { // split project libs
    
56.                                             name: 'chunk-project-components',
    
57.                                             test: resolve('src/views/project'),
    
58.                                             priority: 50,
    
59.                                             chunks: 'async',
    
60.                                             reuseExistingChunk: true
    
61.                                         },
    
62.                                         'teachers-components': { // split teacher libs
    
63.                                             name: 'chunk-teachers-components',
    
64.                                             test: resolve('src/views/teachers'),
    
65.                                             priority: 60,
    
66.                                             chunks: 'async',
    
67.                                             reuseExistingChunk: true
    
68.                                         },
    
69.                                         'utils': { // split utils libs
    
70.                                             name: 'chunk-utils',
    
71.                                             test: resolve('src/utils'),
    
72.                                             priority: 70,
    
73.                                             chunks: 'async',
    
74.                                             reuseExistingChunk: true
    
75.                                         },
    
76.                                     }
    
77.                                 })
    
78.                             })
    
79. 
    
80.                     }
    
81.                 }

复制代码

分析工具：webpack-bundle-analyzer

• 安装
  

npm i --save-dev webpack-bundle-analyzer

• 配置
  

1. config.plugin('BundleAnalyzerPlugin').use(BundleAnalyzerPlugin).tap(() => [
   
2.       {
   
3.         rel: 'BundleAnalyzerPlugin',
   
4.         analyzerMode: 'server', // 'server': 启动端口服务；'static': 生成 report.html；'disabled': 配合 generateStatsFile 使用；
   
5.         generateStatsFile: false, // 是否生成stats.json文件
   
6.         analyzerHost: '127.0.0.1',
   
7.         analyzerPort: '8667',
   
8.         reportFilename: 'report.html',
   
9.         defaultSizes: 'parsed',
   
10.         openAnalyzer: false,
    
11.         statsFilename: 'stats.json',
    
12.         statsOptions: null,
    
13.         excludeAssets: null
    
14.       }

复制代码

运行

1. npm run build 或者 npm run dev

复制代码

访问

1. http://127.0.0.1:8877

复制代码

分析现状

扩展：webpack中module package bundle chunk详细讲解

• module 模块 写一个commonjs 或者amd规范的包就叫module
  
• package 是所有module构成的，它是一个整体的概念，整个项目就是一个package，它可能是commonjs或者amd规范的包
  
• bundle是webpack打包的结果 所有的module都打包成一个文件 （module集合）
  
• chunk bundle是入口bundle,异步加载一个模块，是需要运行时去处理的，获取的过程就是一个代码块即chunk;由bundle获取的包为chunk
  

到此这篇关于webpack中的optimization配置详解的文章就介绍到这了,更多相关webpack配置optimization内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

来源:https://www.jb51.net/article/276247.htm
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！