美文网首页
打包优化

打包优化

作者: Shiki_思清 | 来源:发表于2020-09-15 15:04 被阅读0次
  1. 在production环境下打包需要关闭devtool

  2. inline-source-map: 为每个文件打包后添加base64格式化后的字符串

  3. source-map: 如果线上非要有map,可以用这个,作用是后面跟一个url

  4. 将css剥离出来: extract-text-webpack-plugin

    var ExtractTextPlugin = require('extract-text-webpack-plugin')
    plugins: [new ExtractTextPlugin('[name].[contenthash].css')]
    
  1. 使用 uglifyJsPlugin 压缩时,去掉注释 comment:false

  2. 开启 gzip 压缩 js与csscompression-webpack-plugin

    var CompressionWebpackPlugin = require('compression-webpack-plugin')
    new CompressionWebpackPlugin({
      asset: '[path].gz[query]',
      algorithm: 'gzip',
      test: new RegExp('\\\\.(js|css)$'),
      threshold: 10240,
      minRatia: 0.8
    })
    
  1. 压缩 html, 自动添加静态资源 , html-webpack-plugin

    var HtmlWebpackPlugin = require('html-webapck-plugin')
    new HtmlWebpackPlugin({
        filename: 'react.html',
        template: '../client/react.html',
        injext: true,
        minify: {
            removeComments: true, // 去注释
            collapseWhitespace:true, // 压缩空格
            removeAttributeQuotes:true // 去除属性引用
        },
        chunksSortMode: 'dependency'
    })
    

相关文章

  • webpack打包优化

    实现webpack打包优化,有两个优化点: 如何减少打包时间 如何减少打包大小 减少打包时间 优化Loader对于...

  • webpakc性能优化

    webpakc性能优化 开发环境性能优化1.优化打包构建速度2.优化代码调试 生产环境性能优化1.优化打包构建速度...

  • Apk体积优化

    1、svg的使用与优化2、Tint着色器的使用与优化3、资源打包配置优化4、动态库的打包配置优化5、移除无用的资源...

  • 2019-12-16 总结几个webpack打包优化的方法

    总结几个webpack打包优化的方法 为什么要优化打包? 项目越做越大,依赖包越来越多,打包文件太大 单页面应用首...

  • Vue项目实战笔记(三)

    1、项目优化:生成打包报告: 命令行参数形式生成报告; 可视化UI直接查看报告; 2、打包大小优化: 3、不同打包...

  • webpack 性能优化

    webpack性能优化 开发环境性能优化 生产环境性能优化 开发环境性能优化 优化打包构建速度 优化调试功能 生产...

  • vue项目优化

    vue 项目优化 项目打包体积优化 通常vue项目通过webpack打包后,会出现vendor包的体积过大的情况,...

  • Webpack优化

    Webpack优化打包速度:按需引入压缩代码每个路由页面单独打包使用时再去下载 性能优化:v-if代替v-show...

  • 打包优化

    在production环境下打包需要关闭devtool inline-source-map: 为每个文件打包后添加...

  • Android多渠道打包

    目录一、Python打包及优化(美团多渠道打包)二、Gradle打包三、其他打包方案:修改Zip文件的commen...

网友评论

      本文标题:打包优化

      本文链接:https://www.haomeiwen.com/subject/sgrfyktx.html