删除无用的样式

删除无意义、无用的样式

npm install purgecss-webpack-plugin glob —save-dev

  1. const glob = require('glob') //主要功能就是查找匹配的文件
  2. //glob.sync("./src/**/*",{nodir:true})  //意思是src下的所有文件，但是不找目录  返回的是目录
  3. //主要作用是删除无意义的css，只能配合mini-css-extract-plugin
  4. const PurgeCssWebpackPlugin = require('purgecss-webpack-plugin')
  5. plugins:[
  6.   new PurgeCssWebpackPlugin({
  7.     paths:glob.sync("./src/**/*",{nodir:true})
  8.   })
  9. ]

图片压缩插件

npm install image-webpack-loader —save-dev

在file-loader之前使用压缩插件
另：可以设置一下生产才会去压缩

  1. { // 降低分辨率 清晰度
  2.    test:/\.(jpe?g|png|gif)$/,
  3.    use:{
  4.      loader: 'file-loader',
  5.       },
  6.       { //可以在使用file-loader之前 对图片进行压缩
  7.         loader:'image-webpack-loader',
  8.           options: {
  9.             mozjpeg: {
  10.               progressive: true,
  11.             },
  12.             // optipng.enabled: false will disable optipng
  13.             optipng: {
  14.               enabled: false,
  15.             },
  16.             pngquant: {
  17.               quality: [0.65, 0.90],
  18.               speed: 4
  19.             },
  20.             gifsicle: {
  21.               interlaced: false,
  22.             },
  23.             // the webp option will enable WEBP
  24.             webp: {
  25.               quality: 75
  26.             }
  27.       }
  28.       }
  30.    }

CDN加载文件

打包都会打包到bundles里，文件很多，那样体积就会很大

  • 我们希望可以使用动态加载，cdn加载

以 jq为例，npm install juqery —save,引用这个文件 import $ from ‘jquery’ 这样打包就会找所有的依赖 文件就会很大
这个时候可以使用cdn引入
配置一下：

  1.  externals:{
  2.             "jquery":"$"  //不去打包代码中的jq
  3.         },

通过这种方式引入的依赖库，不需要webpack处理，编译进文件中，在我们需要，使用它的时候可以通过CMD、AMD、或者window全局方式访问。
使用：

  1. const $ = require("jquery")
  2. $("#content").html("<h1>hello world</h1>")

但是，

不可能都用cdn的方式引入,如果太多的话可以使用 插件 add-asset-html-cdn-webpack-plugin 具体的配置使用这里就不再说了…