在 Webpack 中执行代码分割
有三种常使用的代码分离方法:
- 入口起点:用 entry 配置手动地分离代码。
- 防止重复:用 CommonsChunkPlugin 去重和分离 chunk。
- 动态导入:通过板块的内联函数调使用来分离代码。
1、入口起点
这是迄今为止最简单、最直观的分离代码的方式。不过,这种方式手动配置较多
webpack.config.js
- const path = require('path');
- const HTMLWebpackPlugin = require('html-webpack-plugin');
- module.exports = {
- entry: {
- index: './src/index.js',
- another: './src/another-module.js'
- },
- plugins: [
- new HTMLWebpackPlugin({
- title: 'Code Splitting'
- })
- ],
- output: {
- filename: '[name].bundle.js',
- path: path.resolve(__dirname, 'dist')
- }
- };
这将生成如下构建结果
- Hash: 309402710a14167f42a8
- Version: webpack 2.6.1
- Time: 570ms
- Asset Size Chunks Chunk Names
- index.bundle.js 544 kB 0 [emitted] [big] index
- another.bundle.js 544 kB 1 [emitted] [big] another
- [0] ./~/lodash/lodash.js 540 kB {0} {1} [built]
- [1] (webpack)/buildin/global.js 509 bytes {0} {1} [built]
- [2] (webpack)/buildin/module.js 517 bytes {0} {1} [built]
- [3] ./src/another-module.js 87 bytes {1} [built]
- [4] ./src/index.js 216 bytes {0} [built]
正如前面提到的,这种方法存在少量问题:
- 假如入口 chunks 之间包含重复的板块,那些重复板块都会被引入到各个 bundle 中。
- 这种方法不够灵活,并且不能将核心应使用程序逻辑进行动态拆分代码。
2、防止重复
CommonsChunkPlugin 插件可以将公共的依赖板块提取到已有的入口 chunk 中,或者者提取到一个新生成的 chunk。让我们用这个插件,将之前的示例中重复的 lodash 板块去除:
webpack.config.js
- const path = require('path');
- + const webpack = require('webpack');
- const HTMLWebpackPlugin = require('html-webpack-plugin');
- module.exports = {
- entry: {
- index: './src/index.js',
- another: './src/another-module.js'
- },
- plugins: [
- new HTMLWebpackPlugin({
- title: 'Code Splitting'
- – })
- + }),
- + new webpack.optimize.CommonsChunkPlugin({
- + name: 'common' // 指定公共 bundle 的名称。
- + })
- ],
- output: {
- filename: '[name].bundle.js',
- path: path.resolve(__dirname, 'dist')
- }
- };
这里我们用 CommonsChunkPlugin 之后,现在应该可以看出,index.bundle.js 中已经移除了重复的依赖板块。需要注意的是,CommonsChunkPlugin 插件将 lodash 分离到单独的 chunk,并且将其从 main bundle 中移除,减轻了大小。执行 npm run build 查看效果:
- Hash: 70a59f8d46ff12575481
- Version: webpack 2.6.1
- Time: 510ms
- Asset Size Chunks Chunk Names
- index.bundle.js 665 bytes 0 [emitted] index
- another.bundle.js 537 bytes 1 [emitted] another
- common.bundle.js 547 kB 2 [emitted] [big] common
- [0] ./~/lodash/lodash.js 540 kB {2} [built]
- [1] (webpack)/buildin/global.js 509 bytes {2} [built]
- [2] (webpack)/buildin/module.js 517 bytes {2} [built]
- [3] ./src/another-module.js 87 bytes {1} [built]
- [4] ./src/index.js 216 bytes {0} [built]
以下是由社区提供的,少量对于代码分离很有帮助的插件和 loaders:
- ExtractTextPlugin: 使用于将 CSS 从主应使用程序中分离。
- bundle-loader: 使用于分离代码和推迟加载生成的 bundle。
- promise-loader: 相似于 bundle-loader ,但是用的是 promises。
CommonsChunkPlugin 插件还可以通过用显式的 vendor chunks 功能,从应使用程序代码中分离 vendor 板块。
3、动态导入
当涉及到动态代码拆分时, 一般用用webpack提供的符合 ECMAScript 提案 的 import() 语法。
new Vue({
- el: '#app',
- components: {
- AsyncComponent: () => import('./AsyncComponent.vue')
- }
- });
实施代码分割并不难,难在搞清楚在什么时候、什么地方进行。
Vue.js 单页应使用进行代码分割有三种思路:
- 按页面分割
- 用折叠
- 按条件分割
1. 按页面
按页面来进行代码分割,是最显著的一种方式。
假如能确保每个单文件组件代表一个页面,如 Home.vue, About.vue 以及 Contact.vue,那么我们即可以用 Webpack 的 “动态导入” 函数 (import) 来将它们分割至单独的构建文件中。之后后,当使用户访问一个新页面的时候,Webpack 将异步加载该请求的页面文件。
假如使用到了 vue-router,因为页面已经分割成了单独的组件,实施起来会非常方便。
- const Home = () => import(/* webpackChunkName: “home” */ './Home.vue');
- const About = () => import(/* webpackChunkName: “about” */ './About.vue');
- const Contact = () => import(/* webpackChunkName: “contact” */ './Contact.vue');
- const routes = [
- { path: '/', name: 'home', component: Home },
- { path: '/about', name: 'about', component: About },
- { path: '/contact', name: 'contact', component: Contact }
- ];
代码编译完成后,通过查看生成的统计数据得知:每个页面都有自己单独的文件,同时有多出来一个名为 build_main.js 的打包文件。里面包含少量公共的代码以及逻辑,使用来异步加载其它文件,因而它需要在使用户访问路由之前加载完成。
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是摆设,本站源码仅提供给会员学习使用!
7. 如遇到加密压缩包,请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » 在 Webpack 中执行代码分割