首页 > Web开发 > 详细

webpack体积优化篇一

时间：2017-09-13 18:10:33      阅读：286      评论：0      收藏：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”
93f72404-b338-11e6-92d4-9a365550a701
 技术分享
 
按要求写进去，会报错
技术分享

 

技术分享
需要安装cross-env
简单来说，就是windows不支持NODE_ENV=development的设置方式。

使用方法：

  • 安装cross-env:npm install cross-env --save-dev
  • 在NODE_ENV=xxxxxxx前面添加cross-env就可以了。
 
然后在package.json文件里面添加
"scripts": {
"dev": "node build/dev-server.js",
"start": "node build/dev-server.js",
"build": "node build/build.js",
"lint": "eslint --ext .js,.vue src",
"analyz": "cross-env NODE_ENV=production npm_config_report=true npm run build"
}
 
最后在启动npm run ananlyz
技术分享
 技术分享

 

最后就出来了
技术分享
 技术分享

 

webpack体积优化篇一

原文：http://www.cnblogs.com/qiuzhimutou/p/7516279.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
分享档案
更多>
2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)
最新文章
更多>
教程昨日排行
更多>
友情链接
汇智网   PHP教程   插件网  
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣，分享程序人生！