首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
您找到你想要的搜索结果了吗?
是的
没有找到

webpack构建优化:bundle体积从3M到400k之路

赶紧打开chrome (disable cache): image.png 哇,吓了一跳,这打包出来的JS辣么大:lib.js 2.3M(花了14s 才加载完)、app.js 1.2M(花了9s多加载完...node_modules/webpack/bin/webpack.js --progress --hide-modules --config=webpack.app.config.js", //单独打包 lib.js...文件        导致我们页面响应慢另一个大文件是 lib.js(这里介绍下,在我们工程里,对常用的第三方UI组件、绘图组件、编辑组件,项目里将其统一打包到lib.js里面,不用每次构建都重新打包lib.js.../script> <script src="/js/<em>lib.js</em>...执行npm run build-lib 生成,<em>lib.js</em>从2.3M减小到274kB, image.png 最终页面的js文件如下: image.png      对比优化前,网站访问流畅了不少(总共花了

3.9K50

关于 JS 模块化的最佳实践总结

未必,还要看是什么类型的项目,后面会讲到。 ES6 模块规范 在讲 ES6 模块规范之前,我们先看一下规范前驱 CommonJS 的一个缺陷。...相反,对于以下的代码: // lib.js var counter = 3; function incCounter() { counter++; } module.exports = { get...由于 CommonJS 规范的拷贝运行机制,在 lib.js 中使用 module.exports 输出的对象,是从 lib 模块内拷贝而得,当时 counter 的值是几,便拷贝了几。...结论 所以综上所述,在模块化方案上最佳选择是什么? 在小程序(包括小游戏)开发项目中,由于支持 ES6,所以小程序最好的模块化方案便是使用ES6模块规范。...Node 9下import/export的丝般顺滑使用 Sea.js是什么? 前端模块化:CommonJS,AMD,CMD,ES6 Module 的加载实现

2.4K10
领券