zoukankan      html  css  js  c++  java
  • vue打包优化

    1、对项目打包文件进行gzip压缩,插件“compression-webpack-plugin”,在vue.config.js中配置

    yarn add compression-webpack-plugin -D // 如果报错,就降版本5.0.1
    const path = require("path");

    const CompressionPlugin = require("compression-webpack-plugin");

    const productionGzipExtensions = /.(js|css|json|txt|html|ico|svg)(?.*)?$/i;
    function resolve(dir) {
      return path.join(__dirname, dir);
    }
    module.exports
    = { chainWebpack: config => { config.resolve.alias["@"] = resolve("src"); if (process.env.NODE_ENV === "production") { config.plugin("compressionPlugin").use( new CompressionPlugin({ filename: "[path].gz[query]", algorithm: "gzip", test: productionGzipExtensions, threshold: 10240, // 处理大于这个字节的文件 minRatio: 0.8, deleteOriginalAssets: false }) ); } }, };

     2、可视化插件webpack-bundle-analyzer

    yarn add webpack-bundle-analyzer -D // 在vue.config.js中配置
    const BundleAnalyzerPlugin = require("webpack-bundle-analyzer").BundleAnalyzerPlugin;
    configureWebpack: config => {if (process.env.NODE_ENV === "production") {
        config.plugins.push(
          new BundleAnalyzerPlugin()
        );
      }
    }

     3、去除项目中的console.log()

    yarn add terser-webpack-plugin -D
    configureWebpack: (config) => {
      if (process.env.NODE_ENV === "production") {
        config.optimization.minimizer[0].options.terserOptions.compress.drop_console = true;
      }
    }

     4、使用CDN

      (1)index.html 中直接使用 <script src="//cdn.bootcss.com/echarts/4.2.1/echarts.simple.min.js"></script> 

      (2)在vue.config.js中配置

    module.exports = {
     configureWebpack: {
       externals: {
         'echarts': 'echarts' // 配置使用CDN
      }
     }
    }

        (3)在文件中直接import使用就行

      

  • 相关阅读:
    设计模式-工厂设计模式
    Spring Batch BATCH_JOB_SEQ 出现死锁问题
    windows 安装 jenkins 自动化构建部署至linux服务器上
    Git安装
    MAVEN(一) 安装和环境变量配置
    Jenkins 安装
    jenkins操作
    linux firewalld 防火墙操作命令
    【Azure Redis 缓存】Azure Redis读写比较慢/卡的问题排查
    【Azure 服务总线】向服务总线发送消息时,返回错误代码Error code : 50009
  • 原文地址:https://www.cnblogs.com/wangjishu/p/14973314.html
Copyright © 2011-2022 走看看