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

      

  • 相关阅读:
    placeholder这个属性 input
    使用jqprint插件实现打印页面内容
    HTML用JS导出Excel的五种方法
    项目兼容ie8技术要点
    JS设置cookie、读取cookie、删除cookie
    实战WCF中net.tcp和net.msmq绑定协议
    KO工作原理及带来的好处
    jQuery验证控件jquery.validate.js使用说明+中文API(转)
    将datatable导出为excel的三种方式(转)
    javascript面试题(一)(转载)
  • 原文地址:https://www.cnblogs.com/wangjishu/p/14973314.html
Copyright © 2011-2022 走看看