javascript - 如何优化 WebPack 包
问题描述
我正在开发一个 Svelte 项目,它有多个页面(实际上是 5 个不同的 html 文件)并且我使用Snowpack进行测试,使用带有Webpack的Snowpack进行捆绑,因为未捆绑的网站有太多(超过 80 个)请求,因为每个文件都有单独的文件纤细的组件。对于 4mbps 的网络,80 个请求会在几秒钟内加载,但我仍然认为仅在索引页面上有 80 个请求是可怕的.......js
问题是我对Webpack的结果不满意。我之前使用Rollup进行捆绑(Svelte 默认)并切换到 Snowpack 以更快地重新加载。
汇总结果示例(由于为使用相同细长组件的每个页面生成单独的文件,很少有代码重复)
请注意,这是示例,我的应用程序包大小约为 750kb
| Page | Bundled JS | Size |
|------------|---------------------------------|--------|
| index.html | index.js | ~40kb |
| page1.html | page1.js | ~70kb |
| page2.html | page2.js | ~100kb |
| page3.html | page3.js | ~50kb |
| **TOTAL** | One ideal sized JS for one page | ~260kb |
Webpack 结果示例
Webpack为每个页面生成一个大包和类似指针的 js,例如 在 index.js 里面
(window.webpackJsonp=window.webpackJsonp||[]).push([[4],[],[[112,1,0]]]);
| Page | Bundled JS | Size |
|------------|--------------------------------|--------|
| | bundle.**some_hash**.js | ~270kb |
| index.html | index.js | 1kb |
| page1.html | page1.js | 1kb |
| page2.html | page2.js | 1kb |
| page3.html | page3.js | 1kb |
| **TOTAL** | One big messy js for each page | ~270kb |
CSS
文件是一个 ~40kb 包,但我曾经为每个页面单独获取 ~7-8kb css。现在好不开心
捆绑详情
我之前为多个输入/输出配置了 Rollup,我很高兴最终为每个页面设置了理想大小的 css 和 js。
现在我使用@snowpack/plugin-webpack
,并且我对 webpack 不太了解,所以我无法根据需要修改配置..
期望的结果
我需要为每个页面捆绑,就像我在Rollup中一样,带有一个大 js 的Webpack捆绑会显着减慢第一次加载。我希望每个页面的包更小,代码重复并不重要,因为共享组件很小。 请注意,以上是示例,我的应用程序包大小约为 750kb
解决方案
你可以通过定义不同的入口点来拆分成更小的包,这样 webpack 就会知道在哪里拆分代码。其实它不只是分裂,还做了一个tree-shake,把所有没用的代码都扔掉了。
要定义入口点,您需要(如文档中所述):
webpack.config.js
:
const path = require('path');
module.exports = {
mode: 'development',
entry: {
index: './src/index.js',
another: './src/another-module.js',
},
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist'),
},
};
推荐阅读
- mysql - 将大型mysql select语句加载到python中
- c# - 为每个单元格添加带有标签和按钮的自定义 DataGridViewColumn
- amazon-cloudformation - 使用 cloudformation 模板在云端添加 Lambda@edge includebody 字段?
- python - 如何找到一个值的n个小数?
- amazon-web-services - 具有 ALB 和 SSL 证书问题的 ECS:net::ERR_CERT_COMMON_NAME_INVALID
- matlab - 自由和强制响应功能
- javascript - 如何将卡从“待处理”选项卡添加到“已批准”?Vue.js
- git - 詹金斯无法访问 git
- android - 无法解决
- android - 在 Activity onResume() 上显示 Admob 插页式广告