webpack + es2015的import()语法进行code splitting时,需要指定chunk name,便于查看chunk具体是什么文件分离出的。
vue-router 路由懒加载
- 如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了。
- 结合 Vue 的异步组件和 Webpack 的代码分割功能,轻松实现路由组件的懒加载。
一,import() 路由懒加载
- 首先,可以将异步组件定义为返回一个 Promise 的工厂函数 (该函数返回的 Promise 应该 resolve 组件本身):
const Login = () => Promise.resolve({ /* 组件定义对象 */ })
- 第二,在 Webpack 2 中,我们可以使用动态 import语法来定义代码分块点 (split point):
import('./Login.vue') // 返回 Promise
- 结合这两者,这就是如何定义一个能够被 Webpack 自动代码分割的异步组件。
const Login = () => import('./login.vue')
二,webpackChunkName 注释
- 有时候我们想把某个路由下的所有组件都打包在同个异步块 (chunk) 中。只需要使用 命名 chunk,一个特殊的注释语法来提供 chunk name (需要 Webpack > 2.4)。
const Login = () => import(/* webpackChunkName: "Login" */ './login.vue')
- 然后就可以在vue-router中引用该组件
const routers = new Router({
routes: [
{
path: '/login',
name: 'login',
component: Login
},
...
三,在webpack.base.conf.js 和 webpack.prod.conf.js 的 output 导出文件处修改设置
- 具体的修改位置是 filename 和 chunkFilename。如果没有之前的 webpackChunkName 的注释的设置,[name]就会使用数字,如1 ,2,3等来命名,数字应该是打包顺序,待定。有了注释的话,如 / webpackChunkName: “Login” /,[name] 就按照 Login 来命名。
- chunkFilename : 非入口(non-entry) chunk 文件的名称
【注意】webpack.base.conf.js 文件中的 output 修改,影响的是本地开发环境运行的chunk文件的名称,
【注意】webpack.prod.conf.js 中的修改,影响 通过 npm run build 打包后的chunk文件的名称。
- 初始的配置为
module.exports = {
entry: {
app: './src/main.js'
},
output: {
path: config.build.assetsRoot,
filename: '[name].js', // 打包后的文件名 1.js,
...
- 修改后的配置为
module.exports = {
entry: {
app: './src/main.js'
},
output: {
path: config.build.assetsRoot,
filename: '[name].[hash].js',
chunkFilename: '[name].chunk.[hash].js', //打包后的文件名 Login.chunk.2f8e6a3b7cd6aaa0d7ba.js
...
四,.babelrc 文件 中的 commits 不要设置成 false
- 该问题是一个隐藏的坑,webpack相关issue具体地址,仔细爬楼,后面有相关回应。以后如果用 TypeScript 写代码,里面也有相关的处理方案,此处不再赘述。
- 如下是一个总结
To sum up, make sure you set:
comments: true in .babalrc (this is the default)
chunkFilename: '[name].....' in your webpack config
If you are using typescript, also make sure:
removeComments: false under compilerOptions in tsconfig.json
module: esnext in tsconfig.json
- 具体代码位置,删除该行,webpack默认 comments 为 true
{
"comments": false,
...
五,syntax-dynamic-import 插件处理 import()
如果您使用的是 Babel,你将需要添加 syntax-dynamic-import 插件,才能使 Babel 可以正确地解析语法。
插件地址
- 首先安装插件
npm install --save-dev @babel/plugin-syntax-dynamic-import
- 然后在.babelrc 文件中写如下配置
{
"plugins": ["@babel/plugin-syntax-dynamic-import"]
}
- 此外,该插件的实现还需要其他的一些babel插件才能使用,有关内容在babel7的升级文档中描述