vue懒加载组件应用实践

库版本

"@babel/plugin-syntax-dynamic-import": "^7.8.3",
"@babel/polyfill": "^7.6.0",
"@babel/core": "^7.6.0",
"@babel/preset-env": "^7.6.0",
"babel-plugin-dynamic-import-webpack": "^1.1.0",
"vue": "^2.6.10",
"vue-router": "^3.1.3",
"webpack": "^4.28.3",

涉及改造文件

vue-router

router/index.js
在router文件中，需要将普通的import引用改成import()引用，具体的import()知识点不在这里赘述，只需要知道这是个异步引用即可。

将组建引用从原来的

import Comp from '../componnets/Comp';

改为

const Comp = () => import(/* webpackChunkName: "Comp" */ '../componnets/Comp');

注意注释内的/* webpackChunkName: "CourseIntro" */不可遗漏

router配置中依然用原来的配置即可

const router = new Router({
    routes: [{
        path: '/pathname',
        component: Comp,
    }]
})

webpack

webpack无需做额外配置

babel

如果使用了babel加载，需要额外引用一个库"babel-plugin-dynamic-import-webpack"
执行yarn add babel-plugin-dynamic-import-webpack --save-dev
并且在babel.config.js里配置

module.exports = {
    presets: [
        [
            '@babel/preset-env',
            {
                useBuiltIns: 'usage',
                corejs: '2.6',
                modules: 'false', // 注意这里必须是false，否则plugin-syntax-dynamic-import不起作用
            },
         ],
    ],
    plugins: ['@babel/plugin-syntax-dynamic-import'],
};

注意事项

如果要兼容无Promise环境（比如IE），需要自行引用polyfill，具体方法参考文档

参考资料

vue-router文档

webpack文档 - 代码分块

额外问题

在vue-router文档中，提到需要用Promise.resolve包裹

export default () => Promise.resolve({/* vue组件信息 */})

但是实际使用中发现如果这么做，会报错
原因不明