vue2.0前端项目打包后生成的chunk-vendors文件过大加载太慢解决方案

最新推荐文章于 2024-10-08 10:55:40 发布

baifucn

最新推荐文章于 2024-10-08 10:55:40 发布

阅读量3.2k

点赞数 1

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/baifucn/article/details/111866421

版权

针对Vue2项目中chunk-vendors文件过大导致的加载速度慢的问题，本文提出了一种解决方案。通过引入特定插件并配置vue.config.js，可以实现文件拆分和压缩，从而提高加载效率。此外，文中还提及了Nginx服务器的相应配置以进一步提升性能。最终，打包后的项目将加载压缩版的JS文件，确保快速加载。

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

不多说，直接使用插件解决这个问题！
第一步：先下载这个插件

npm install --save-dev compression-webpack-plugin

第二步：修改vue.config.js配置文件，如果没有vue.config.js，在根目录自己创建一个，下面是配置文件的代码

const path = require('path');

const webpack = require('webpack')
const CompressionWebpackPlugin = require('compression-webpack-plugin')
const productionGzipExtensions = ['js', 'css']
const isProduction = process.env.NODE_ENV === 'production'

module.exports = {
  lintOnSave: false,
  runtimeCompiler: true,
  publicPath: './', // 设置打包文件相对路径
  // 这是前端解决跨域的代码
  devServer: {
    // open: process.platform === 'darwin',
    // host: 'localhost',
    port: 8080,
    // open: true, //配置自动启动浏览器
    proxy: {
      '/api': {
        target: ``,//写上接口基地址
        changeOrigin: true,
        ws: true,
        // secur