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

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