Webpack 14 之打包分析,Preloading,Prefetching

300 阅读1分钟

webpack 打包分析,Preloading.Prefetching

课程目标

  1. 什么是打包分析?
  2. 什么是Preloading?
  3. 什么是Prefetching?

什么是打包分析?

当我们使用webpack进行代码的打包之后,我们可以借助打包分析的一些工具来对我们打包生成的一些文件进行一定的分析,来判断打包的是否合理。

打包文件分析的工具可以使用网址参考:www.github.com/webpack.ana…

  • 打开我们的package.json文件夹在里面配置:
--profile--json>stats.json配置这个即可
"script":{
    "dev-build":"webpack--profile--json>stats.json--config ./build/webpack.dev.js"
}
npm run dev-build命令进行打包

  • 打包之后会生成stats.json描述性的文件
  • github.com/webpack.ana… 打开这个网站,在里面有一个 https:///webpack.github.com/analyse,进入此网站
  • 点击JSON file将我们生成的stats.json文件进行上传
  • 可以帮助我们进行分析我们打包文件 还可以使用其他的打包分析文件的工具在webpack官网上打开指南,有一个Code Splittiing下面的Bundle Analysis里面有一些工具,比如webpack chart等

二、Preloading