Webpack 打包优化之体积篇
2017-11-06 09:11
197 查看
谈及如今欣欣向荣的前端圈,不仅有各类框架百花齐放,如
以及下一代打包神器
Webpack
Package optimization
项目的 package.json 文件中注入如下命令,以方便运行她(
“analyz”: “NODE_ENV=production npm_config_report=true npm run build”
webpack-bundle-analyzer
当然,同类型的还有 webpack-chart 以及 webpack-analyse,这两个站点也是以可视方式呈现构造的组件,可以让你清楚的看到模块的组成部分;不过稍显麻烦的是,你需要运行以下命令,生成工具分析所需要的
json 文件:
引入
DllPlugin 和 DllReferencePlugin 提供了以大幅度提高构建时间性能的方式拆分软件包的方法。其中原理是,将特定的第三方NPM包模块提前构建
Vue,
React,
Angular等等,就打包工具而言,发展也是如火如荼,百家争鸣;从早期的王者
Browserify,
Grunt,到后来赢得宝座的
Gulp, 以及独树一帜的
fis3,
以及下一代打包神器
Rollup;在 browserify,grunt,gulp,rollup,webpack 可以一窥其中部分对比。在本文要探究的是,当前打包工具绝对霸者
Webpack。
Webpack
Package optimization
Webpack,当前各大主流框架默认配备的打包方案,对其如何使用,已有较完备中英文文档;并且,各主流框架也有对应
CLI予以基础配置,故不作为探讨范畴。从产品层来讲,如何使得构建的包体积小、运行快,这有必要不断摸索实践,提炼升级,使之臻于最佳。本文将从以下些许方面,对
Webpack打包体积方面,做下优化探讨(备注:
Webpack实践版本:
3.3.0):
定位 webpack 大的原因
这里推荐使用 webpack-bundle-analyzer —— Webpack 插件和 CLI 实用程序,她可以将内容束展示为方便交互的直观树状图,让你明白你所构建包中真正引入的内容;我们可以借助她,发现它大体有哪些模块组成,找到不合时宜的存在,然后优化它。我们可以在项目的 package.json 文件中注入如下命令,以方便运行她(
npm run analyz),默认会打开 http://127.0.0.1:8888 作为展示。
“analyz”: “NODE_ENV=production npm_config_report=true npm run build”
webpack-bundle-analyzer
当然,同类型的还有 webpack-chart 以及 webpack-analyse,这两个站点也是以可视方式呈现构造的组件,可以让你清楚的看到模块的组成部分;不过稍显麻烦的是,你需要运行以下命令,生成工具分析所需要的
json 文件:
1234 | webpack --profile --json > stats.json// 如果,运行指定的 weboack 文件,可用此命令webpack --config build/webpack.prod.conf.js --profile --json > stats.json |
引入
DllPlugin 和 DllReferencePlugin
DllPlugin 和 DllReferencePlugin 提供了以大幅度提高构建时间性能的方式拆分软件包的方法。其中原理是,将特定的第三方NPM包模块提前构建
相关文章推荐
- webpack打包优化
- Webpack 打包优化之体积篇
- Webpack 打包优化之体积篇
- webpack 打包文件体积过大解决方案(code splitting)
- 关于vue的webpack打包优化问题
- Webpack 打包之体积优化
- vue2.x 路由懒加载 优化打包体积
- [转] Webpack 打包优化之体积篇
- webpack体积优化篇一
- Webpack打包后体积过大的优化思路
- 基于rollup的组件库打包体积优化小结
- Webpack 打包react 问题报错:
- 【手机游戏开发优化篇】详解手游[体积]及[运行内存]的优化篇!
- 优化网站设计(二十三):减小Cookie的体积
- webpack学习之七,让打包的文件能使用浏览器本地缓存
- Android打包之Ant打入第三方jar包及zipalign对齐优化
- 网页图片体积优化方法
- cocos2d-x 体积优化
- Android APK快速签名—优化打包时间
- 代码体积优化