首页 > Web开发 > 详细

webpack体积优化篇一

时间：2017-09-13 18:32:18 阅读：258 评论：0 收藏：0 [点我收藏+]

标签：eve install 实用添加 bsp 树状 server windows webp

定位 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体积优化篇一

标签：eve install 实用添加 bsp 树状 server windows webp

原文地址：http://www.cnblogs.com/qiuzhimutou/p/7516279.html

踩

(0)

赞

(0)

举报

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行

更多

友情链接

兰亭集智国之画百度统计站长统计阿里云 chrome插件新版天听网

关于我们 - 联系我们 - 留言反馈

© 2014 mamicode.com 版权所有联系我们:gaon5@hotmail.com

迷上了代码！