美文网首页
打包优化

打包优化

作者: 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'
      })
      

    相关文章

      网友评论

          本文标题:打包优化

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