关于javascript: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 组件信息 */})

然而理论应用中发现如果这么做，会报错
起因不明