路由懒加载安装 @babel/plugin-syntax-dynamic-import 包 (Vue项目上线优化六)

最新推荐文章于 2024-08-23 09:50:37 发布

Linxi~

最新推荐文章于 2024-08-23 09:50:37 发布

阅读量4k

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/qq_45516629/article/details/105619323

版权

本文介绍了如何在Vue项目中实现路由懒加载以优化上线性能，通过安装并配置@babel/plugin-syntax-dynamic-import包，将路由组件按需加载，详细步骤包括安装插件、配置babel.config.js以及修改路由设置。

摘要由CSDN通过智能技术生成

当打包构建项目时，JavaScript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。

具体需要 3 步：

① 安装 @babel/plugin-syntax-dynamic-import 包。

打开vue控制台，点击依赖->安装依赖->开发依赖->搜索@babel/plugin-syntax-dynamic-import 点击安装。

② 在 babel.config.js 配置文件中声明该插件。

//项目发布阶段需要用到的babel插件
const productPlugins = []

//判断是开发还是发布阶段
if(process.env.NODE_ENV === 'production'){
  //发布阶段
  productPlugins.push("transform-remove-console")
}

module.exports = {
  "presets": [
    "@vue/app"
  ],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ],
    ...productPlugins,
    //配置路由懒加载插件
    "@babel/plugin-syntax-dynamic-import"
  ]
}

③ 将路由改为按需加载的形式，打开路由的js文件，/src/router/index.js示