-
Notifications
You must be signed in to change notification settings - Fork 0
optimization.cn
To minimize your scripts (and your css, if you use the css-loader) webpack supports a simple option:
可以通过简单的配置来让 webpack 来压缩脚本（通过 css-loader 来支持压缩 css）：
--optimize-minimize resp. new webpack.optimize.UglifyJsPlugin()
--optimize-minimize 对应 new webpack.optimize.UglifyJsPlugin()
That's a simple but effective way to optimize your web app.
这是一个简单但有效的优化应用的方法。
As you already know (if you've read the remaining docs) webpack gives your modules and chunks ids to identify them. Webpack can vary the distribution of the ids to get the smallest id length for often used modules with a simple option:
如果阅读了剩下的文档，那么将了解到，webpack 给每个模块和分块分配了 id 来识别它们。webpack 可以通过下面的简单配置给_常用的模块_分配最简短的 id （来进行优化）：
--optimize-occurrence-order resp. new webpack.optimize.OccurrenceOrderPlugin()
--optimize-occurrence-order 对应. new webpack.optimize.OccurrenceOrderPlugin()
The entry chunks have higher priority for file size.
考虑到文件尺寸，入口块优先级更高
If you use some libraries with cool dependency trees, it may occur that some files are identical. Webpack can find these files and deduplicate them. This prevents the inclusion of duplicate code into your bundle and instead applies a copy of the function at runtime. It doesn't affect semantics. You can enable it with:
在使用各有依赖的代码库时，有可能出现这些库有些完全相同的依赖。Webpack 能够找到这些相同的文件并进行去重。这样，既防止在生成的文件中包含重复代码，也可在运行时复用引用。这个功能并不会影响代码语义，可以通过下面的配置来开启：
--optimize-dedupe resp. new webpack.optimize.DedupePlugin()
--optimize-dedupe 对应 new webpack.optimize.DedupePlugin()
This feature adds some overhead to the entry chunk.
这个功能会在入口块中增加额外的代码。
While writing your code, you may have already added many code split points to load stuff on demand. After compiling you might notice that there are too many chunks that are too small - creating larger HTTP overhead. Luckily, Webpack can post-process your chunks by merging them. You can provide two options:
编写代码的过程中，可能会使用多个代码分离点来做按需加载。但在编译后却发现过多的小分块反而加重了 HTTP 请求的开销。幸运的是，Webpack 可以通过后期合并这些小的分块来解决这种问题，相关的配置有两个：
- Limit the maximum chunk count with
--optimize-max-chunks 15new webpack.optimize.LimitChunkCountPlugin({maxChunks: 15}) - Limit the minimum chunk size with
--optimize-min-chunk-size 10000new webpack.optimize.MinChunkSizePlugin({minChunkSize: 10000})
- 限制最大分块数量
--optimize-max-chunks 15或new webpack.optimize.LimitChunkCountPlugin({maxChunks: 15}) - 限制最小的分块大小
--optimize-min-chunk-size 10000或new webpack.optimize.MinChunkSizePlugin({minChunkSize: 10000})
Webpack will take care of it by merging chunks (it will prefer merging chunk that have duplicate modules). Nothing will be merged into the entry chunk, so as not to impact initial page loading time.
Webpack 会通过合并分块来进行处理（优先合并有重复模块的分块），不会把这些小的分块合并进入口块中，因为这有可能会影响初始加载时间。
A Single-Page-App is the type of web app webpack is designed and optimized for.
Webpack 本身就是为单页应用设计和优化的。
You may have split the app into multiple chunks, which are loaded at your router. The entry chunk only contains the router and some libraries, but no content. This works great while your user is navigating through your app, but for initial page load you need 2 round trips: One for the router and one for the current content page.
你可能已经把应用代码分离成了多个根据路由来加载的分块，其中入口块只包含了路由和一些依赖库而没有实质内容。这个做法对于应用中的浏览切换是挺好的，只是初始页面有两个网络请求：路由和当前页的应用代码。
If you use the HTML5 History API to reflect the current content page in the URL, your server can know which content page will be requested by the client code. To save round trips to the server you can include the content chunk in the response: This is possible by just adding it as script tag. The browser will load both chunks parallel.
如果你使用了 HTML5 的 History API 通过 url 映射页面内容，那么服务端就能根据 url 来知道请求具体是单页应用中的哪一个页面。为节省与服务器来回通信，可以直接在响应中包含请求页面的内容分块：通过增添 script 标签可以做到。这样，浏览器会并行加载分块。
<script src="entry-chunk.js" type="text/javascript" charset="utf-8"></script>
<script src="3.chunk.js" type="text/javascript" charset="utf-8"></script>You can extract the chunk filename from the stats. (stats-webpack-plugin could be used for exports the build stats)
分块的名称可以从 webpack 的 stats 中读取（可以使用 stats-webpack-plugin 来导出构建的 status）。
When you compile a (real) multi page app, you want to share common code between the pages. In fact this is really easy with webpack: Just compile with multiple entry points:
当搭建真正的多页应用时，自然是希望能够跨页共享代码。事实上，Webpack 可以很简单地实现这个需求，只需要使用多个入口点就可以了：
webpack p1=./page1 p2=./page2 p3=./page3 [name].entry-chunk.js
module.exports = {
entry: {
p1: "./page1",
p2: "./page2",
p3: "./page3"
},
output: {
filename: "[name].entry.chunk.js"
}
}This will generate multiple entry chunks: p1.entry.chunk.js, p2.entry.chunk.js and p3.entry.chunk.js. But additional chunks can be shared by them.
这样就会创建多个入口块：p1.entry.chunk.js，p2.entry.chunk.js 和 p3.entry.chunk.js，但它们可以共享别的分块。
If your entry chunks have some modules in common, there is a cool plugin for this. The CommonsChunkPlugin identifies common modules and put them into a commons chunk. You need to add two script tags to your page, one for the commons chunk and one for the entry chunk.
如果你的入口分块有共用的模块，那么有个插件很有用。CommonsChunkPlugin 可以定位共用的模块然后把它们提取出来放到一个公共分块中。这样，页面中只需要引入两个 script，一个是公共分块另一个则是该页面的入口块。
var CommonsChunkPlugin = require("webpack/lib/optimize/CommonsChunkPlugin");
module.exports = {
entry: {
p1: "./page1",
p2: "./page2",
p3: "./page3"
},
output: {
filename: "[name].entry.chunk.js"
},
plugins: [
new CommonsChunkPlugin("commons.chunk.js")
]
}This will generate multiple entry chunks: p1.entry.chunk.js, p2.entry.chunk.js and p3.entry.chunk.js, plus one commons.chunk.js. First load commons.chunk.js and then one of the xx.entry.chunk.js.
这样会生成多个入口块： p1.entry.chunk.js、p2.entry.chunk.js 和 p3.entry.chunk.js 以及 commons.chunk.js。首先加载 commons.chunk.js，然后加载对应页面的入口块 xx.entry.chunk.js。
You can generate multiple commons chunks, by selecting the entry chunks. And you can nest commons chunks.
还可以通过组合入口分块来生成多个公共块，公共块之间也能嵌套引用。
var CommonsChunkPlugin = require("webpack/lib/optimize/CommonsChunkPlugin");
module.exports = {
entry: {
p1: "./page1",
p2: "./page2",
p3: "./page3",
ap1: "./admin/page1",
ap2: "./admin/page2"
},
output: {
filename: "[name].js"
},
plugins: [
new CommonsChunkPlugin("admin-commons.js", ["ap1", "ap2"]),
new CommonsChunkPlugin("commons.js", ["p1", "p2", "admin-commons.js"])
]
};
// <script>s required:
// page1.html: commons.js, p1.js
// page2.html: commons.js, p2.js
// page3.html: p3.js
// admin-page1.html: commons.js, admin-commons.js, ap1.js
// admin-page2.html: commons.js, admin-commons.js, ap2.jsAdvanced hint: You can run code inside the commons chunk: 偷偷告诉你：公共块里的代码也能直接执行：
var CommonsChunkPlugin = require("webpack/lib/optimize/CommonsChunkPlugin");
module.exports = {
entry: {
p1: "./page1",
p2: "./page2",
commons: "./entry-for-the-commons-chunk"
},
plugins: [
new CommonsChunkPlugin("commons", "commons.js")
]
};See also multiple-entry-points example and advanced multiple-commons-chunks example.
此篇翻译参照了liunian/webpack-doc对应的文档