【其他】webpack实现性能优化

一、缩小文件的搜索范围

webpack里面有个resolve字段,可以告诉webpack怎么去搜索文件

 

二、压缩图片

npm i image-webpack-loader -D

rules: [{
  test: /\.(gif|png|jpe?g|svg)$/i,
  use: [
    'file-loader',
    {
      loader: 'image-webpack-loader',
      options: {
        bypassOnDebug: true, 
        disable: true, 
      },
    },
  ],
}]

三、压缩js: 

使用webpack内置UglifyJS插件、ParallelUglifyPlugin
npm i -D uglifyjs-webpack-plugin

const UglifyJsPlugin = require('uglifyjs-webpack-plugin')

module.exports = {
  plugins: [
    new UglifyJsPlugin()
  ]
}

四、压缩css：

weboack中4+的版本和以前的版本的压缩方式是不一样的，webpack4+版本的方式使用optimize-css-assets-webpack-plugin

 

安装

npm install --save-dev optimize-css-assets-webpack-plugin

// 引入模块
const OptimizeCssAssetsPlugin=require('optimize-css-assets-webpack-plugin')



 plugins: [
        new HtmlPlugin({
            title:'webpack test',
            template:path.join(__dirname, './public/index.html')
        }),
        // 压缩css
        new OptimizeCssAssetsPlugin(),
        new MiniCssExtractPlugin({
            filename:'[name].css',
            chunkFilename:'[id].css'
        })
      ]

五、去掉不必要的插件：

六、gzip压缩:

 

 

 

 

 

 

 

搜索

复制