问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

vue2.6，打包后app.js，8M,chunk.js，6M，加载打开页面很慢，有什么办法减少，打开页面快一些？

头像
豫则立
    31012880

    vue2.6，打包后app.js，8M,chunk.js，6M，加载打开页面很慢，有什么办法减少，打开页面快一些？

    vue.jsvue2打包
    阅读 4.5k
    avatarAI BotBETA

    回答

    要减少 Vue 2.6 项目打包后的文件大小，并加快页面加载速度，可以采取以下策略：

    1. 代码分割（Code Splitting）：

      • 使用 Vue Router 的懒加载功能，将不同路由对应的组件进行代码分割。
      • 例如：const Foo = () => import('./Foo.vue')

    2. 动态导入（Dynamic Imports）：

      • 仅在需要时才加载某些模块或组件，减少初始加载的文件大小。

    3. Tree Shaking：

      • 确保使用支持 Tree Shaking 的打包工具（如 Webpack 4+），并配置正确。
      • 使用 ES6 模块语法，以便未使用的代码可以在打包时被移除。

    4. 压缩和优化：

      • 使用 UglifyJS 或 Terser 进行 JavaScript 代码压缩。
      • 使用 gzip 或 Brotli 对传输的文件进行压缩。
      • 配置 Webpack 的 optimization 选项，例如 splitChunks 来优化代码分割。

    5. 图片和其他资源的优化：

      • 优化和压缩图片资源。
      • 使用合适的图片格式（如 WebP）。
      • 考虑使用图片懒加载技术。

    6. 使用 CDN：

      • 将一些大型库（如 Vue、Vue Router、Vuex）通过 CDN 引入，减少本地打包的大小。

    7. 分析打包结果：

      • 使用 Webpack Bundle Analyzer 工具来分析打包后的文件，找出哪些部分占用了大量空间。
      • 根据分析结果进行针对性的优化。

    8. 减少不必要的依赖：

      • 审查项目依赖，移除不再使用的库或模块。

    通过上述方法，你可以显著减少打包后的文件大小，从而加快页面的加载速度。

    2 个回答
    得票最新
    头像
    Seven
      2.6k2311
      ✓ 已被采纳

      可以参考这篇文章
      【Vue项目 - 打包最强优化（10M变300kb）】

      个人推荐以下两个方法：

      1. 代码分割和懒加载

      // 在路由配置中使用懒加载
const Home = () => import(/* webpackChunkName: "home" */ './views/Home.vue');
const About = () => import(/* webpackChunkName: "about" */ './views/About.vue');

const router = new VueRouter({
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About }
  ]
});

      2. 使用CDN引入第三方库

      // 在vue.config.js中配置
module.exports = {
  configureWebpack: {
    externals: {
      'vue': 'Vue',
      'vue-router': 'VueRouter',
      'echarts': 'echarts'
    }
  }
};


// 在index.html中引入CDN
// <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
// <script src="https://cdn.jsdelivr.net/npm/vue-router@3.5.3/dist/vue-router.min.js"></script>

      补充

      清除缓存

      rm -rf node_modules
rm -rf dist
npm cache clean --force
npm install
npm run build

      将app.js拆分成多个小文件，可以使用Webpack的代码分割功能。以下是具体步骤：

      1. 配置Webpack的splitChunks
      在vue.config.js中配置splitChunks，将代码分割成多个小文件：

      module.exports = {
  configureWebpack: {
    optimization: {
      splitChunks: {
        chunks: 'all',
        minSize: 20000,
        maxSize: 70000,
      },
    },
  },
};

      2. 动态导入模块
      使用动态导入（import()）将模块按需加载。例如，将某个模块拆分成单独的文件：

      // 在需要的地方使用动态导入
import(/* webpackChunkName: "moduleA" */ './moduleA').then(module => {
  module.doSomething();
});

      3. 多入口配置
      如果你的项目有多个入口文件，可以在vue.config.js中配置多入口：

      module.exports = {
  configureWebpack: {
    entry: {
      app: './src/main.js',
      admin: './src/admin.js',
    },
    output: {
      filename: '[name].[contenthash:8].js',
    },
  },
};

      cdn 引入 elementUi后，import locale from 'element-ui/lib/locale/lang/en'，locale报错处理

      1. 引入 CDN

      • 通过 <script> 标签引入 Element UI 的完整包和所需的语言包，例如：
      <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Element UI Example</title>
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
  <div id="app">
    <el-button>Default Button</el-button>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script src="https://unpkg.com/element-ui/lib/locale/lang/en.js"></script>
</body>
</html>

      2. 配置语言

      • CDN 的方式需要使用 Element.locale() 方法来设置语言，代码如下：
      <script>
  // 引入语言包后，直接使用
  const locale = ELEMENT.lang.en; // en 是英语语言包
  ELEMENT.locale(locale);

  new Vue({
    el: '#app',
    data() {
      return {};
    }
  });
</script>

      通过CDN使用时，语言包需要直接通<script>引入，并使用 ELEMENT.locale()设置语言

      头像
      豫则立
        31012880

        在服务器上开启gzip压缩，解决加载时间长的问题了。

        撰写回答
        你尚未登录，登录后可以
        • 和开发者交流问题的细节
        • 关注并接收问题和回答的更新提醒
        • 参与内容的编辑和改进，让解决方法与时俱进
        推荐问题
        宣传栏