Webpack构建速度优化

bpack构建分析

•  输出Webpack构建信息的.json文件：webpack --profile --json > starts.json 

1.  --profile:记录构建中的耗时信息
2.  --json:以json格式输出构建结果，只输出一个json文件（包含所有的构建信息）

•  web可视化查看构建分析：得到了webpack构建信息文件starts.json，如何进行很好的可视化查看？

        1. 方案一：通过可视化分析工具Webpack Analyse，是个在线Web应用，上传starts.json文件就可以；

        2. 方案二：安装webpack-bundle-analyzer工具npm i -g webpack-bundle-analyzer,生成starts.json后直接在其文件夹目录执行webpack-bundle-analyzer后，浏览器会打开对应网页并展示构建分析文档地址webpack-bundle-analyzer

        3. webpack-dashboard是一款统计和优化webpack日志的工具，可以以表格形势展示日志信息。其中包括构建过程和状态、日志以及涉及的模块列表

        4. jarvis是一款基于webapck-dashboard的webpack性能分析插件，性能分析的结果在浏览器显示，比webpack-bundler-anazlyer更美观清晰GitHub文档地址

        1. 根据导入语句寻找对应的要导入的文件；

        2. 在根据要导入的文件后缀，使用配置中的Loader去处理文件（如使用ES6需要使用babel-loader处理）

1. 优化Loader配置

•   npm i -D webpack-jarvis
• rt:监听的端口，默认1337，监听面板将监听这个端口，通常像http://localhost:port/
•   host:域名，默认localhost,不限制域名。
•   watchOnly:仅仅监听编译阶段。默认为true,如果高为false，jarvis不仅仅运行在编译阶段，在编译完成后还保持运行状态。
•   界面：看到构建时间为：Time: 11593ms(作为优化时间
• webpack在启动时会从配置的Entry出发，解析出文件中的导入语句，再递归解析。
•  对于导入语句Webpack会做出以下操作：
  •  针对这两点可以优化查找途径

            1. 频率出现高的文件后缀优先放在前面；

            2. 列表尽可能的小；

            3. 书写导入语句时，尽量写上后缀名

  使用DllPlugin优化

          1. 将依赖的第三方模块抽离，打包到一个个单独的动态链接库中

          2. 当需要导入的模块存在动态链接库中时，让其直接从链接库中获取

          3. 项目依赖的所有动态链接库都需要被加载

          1. DllPlugin插件：用于打包出一个个单独的动态链接库文件；

          2. DllReferencePlugin:用于在主要的配置文件中引入DllPlugin插件打包好的动态链接库文件
  
  

  •   Loader处理文件的转换操作是很耗时的，所以需
  • 导入没带文件后缀的路径时，webpack会自动带上后缀去尝试询问文件是否存在，而resolve.extensions用于配置尝试后缀列表；默认为extensions:['js','json'];
  •   及当遇到require('./data')时webpack会先尝试寻找data.js，没有再去找data.json；如果列表越长，或者正确的后缀越往后，尝试的次数就会越多
  •   所以在配置时为提升构建优化需遵守：
    •   因为项目中用的jsx较多，所以配置extensions: [".jsx",".js"],
    •  基本配置后查看构建速度：Time: 10654ms;配置前为Time: 11593ms 
    •  在使用webpack进行打包时候，对于依赖的第三方库，如react，react-dom等这些不会修改的依赖，可以让它和业务代码分开打包；
    •  只要不升级依赖库版本，之后webpack就只需要打包项目业务代码，遇到需要导入的模块在某个动态链接库中时，就直接去其中获取；而不用再去编译第三方库，这样第三方库就只需要打包一次。
    •  接入需要完成的事：
    •  接入工具(webpack已内置)

（编辑：应用网_丽江站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!