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使用就行

      

  • 相关阅读:
    VS开发ExtJS
    ASP.NET初识9
    程序窗体和对话框
    浏览器的使用
    ASP.NET初识6
    310号的收获 将会决定 业余时间的方向。now foucs
    无代码 无说服力 4种 cast
    android Makefile 的流程—how android makefile workmakefile progress in android
    【资料】父子进程可以共享变量吗? 使用pipeline
    Sysinternals 手册阅读 about vmmap目标运行中优化内存
  • 原文地址:https://www.cnblogs.com/wangjishu/p/14973314.html
Copyright © 2011-2022 走看看