webpack 之前端性能优化

1.将css从js中提取出来，并且将无用的css去掉然后进行压缩

我用到了bootstrap，需要将bootstrap中无用的css去掉，如果bootstrap为3.x版本，可以下载定制版,这样可以减小包的大小，但我用了4.x版本，没找到定制版所以下载了完整版。（这里我没有用npm下载到包依赖里，下面会解释原因）

首先下载所需的插件

npm install mini-css-extract-plugin purifycss-webpack purify-css optimize-css-assets-webpack-plugin cssnano glob-all --save-dev

配置webpack.config.js

//利用glob.sync实现多页面打包
const glob=require('glob-all');

//从js中提取css到单独的文件
const MinicssExtractPlugin = require('mini-css-extract-plugin');
//去掉无用的css
const purifycssWebpack = require('purifycss-webpack');
//压缩css
const OtimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');

plugins: HtmlWebpackPlugins.concat([ //配置插件
    // 提取css
    new MinicssExtractPlugin({
      filename: [name].[contenthash:8].css
    }),
    // css摇树，去除无用css:注意插件顺序：html文件生成 > css提取 > css摇树
    new purifycssWebpack({
      //此处的路径必须配置正确，我当初也是因为这个路径费了好大劲
    　paths: glob.sync([ 
        path.join(__dirname,'src/*/index.html'),
        path.join(__dirname,'src/*/index.js'),
        path.join(__dirname,'static/js/*.js')
        //因为我将bootstrap.js放到了static/js/目录中，有一些动态的样式在js中，所以需要将js也包括进来
        //这里之所以不用npm引入bootstrap是怕这边路径配置不正确导致css样式不全
      ])
    }),
    // 压缩css
    new OtimizeCssAssetsPlugin({
      assetNameRegExp: /\.css$/g,
      cssProcessor: require('cssnano')//此处压缩css代码配合cssnao
    })
])

js

//这里之前尝试用min.css,但是min.css总是导致样式乱掉，具体原因不详，自我感觉可能是分号的问题，所以引入了bootstrap.css,反正打包时还会重新压缩
import 'static/css/bootstrap.css';
import 'static/css/index.css'

此处注意两点：
1.css摇树时路径配置必须准确
2.如果是引入第三方库不能引入压缩过的css(此项我仅验证了bootstrap 4.x)

2.引入jQuery

npm install jquery --save

const webpack = require('webpack');

module.exports = {
  resolve: {
    alias: { //别名
      'static': path.join(__dirname, 'static'),
      'jquery': 'jquery'
    }
  },
  plugins: [ //配置插件
    new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery",
      'window.jQuery': "jquery"
    })
  ]
}

3.echats等第三方库非常大

方法一：因为我只用到了简单的折线图和饼图所以只下载了这两个的定制版echarts.js

方法二：按需引入 ECharts 图表和组件 可以按需引入的模块列表

npm install echarts --save

// 引入 echarts 主模块
var echarts = require('echarts/lib/echarts');
// 引入折线图和饼图
require("./lib/chart/line");
require("./lib/chart/pie");
// 引入提示框
require('echarts/lib/component/tooltip');

方法三：使用了externals将第三方库以cdn的方式去引入

• 在bootcdn上有echarts相关的cdn链接
• 在html中引入echarts:
• 在webpack中配置echarts
  在webpack.config.js文件内添加externals选项，和entry平级；

externals: {
   echarts: 'echarts'
},

• 使用：

let myChart = echarts.init(this.$refs('myChart'));
myChart.setOption(option);

我的个人博客,有空来坐坐