webpack常用插件使用

Plugin

1. webpack-bundle-analyzer

功能

可以解决首屏加载过慢的问题

使用

1.1 安装

npm install --save webpack-bundle-analyzer

1.2 配置

• 在vue.config.js中添加配置

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
module.exports = {
    configureWebpack:{
        plugins:[
            new BundleAnalyzerPlugin({
                // 可以是 server static disabled三种选项
                // 1. server: 可以使用http服务器来显示软件包
                // 2. static：可以生成带有单个html文件的报告
                // 3. disabled: 可以结合generateStatsFile为true生成webpack的stats的报告文件
                analyzerMode:'server',
                analyzerHost:'xxx.x.x.x',
                analyzerPort:8888,
                generateStatsFile:true,  //是否生成stats.json文件
                reportFilename:'report.html',
                defaultSizes:'parsed'， // stat parsed gzip三种可选
                openAnalyzer:true, // 默认在浏览器中自动打开报告
                generateStatsFile:true, // true:则在bundle输出目录中生成stats.json
                statsFilename: 'stats.json',
                statsOptions: null,
                logLevel: 'info'
            })
        ]
    }
}

• 启动

npm run build --report

• 效果图

• 分析 可以发现chunk-vendors的js文件较大，接下来就对该文件进行优化

优化

1. CDN抽离不经常更新的库

功能

对于vue,element-ui,vue-router,axios,qs等不经常更新的库，可以用cdn缓存，缩小包的体积，减少首屏白屏时间

使用

• 在vue.config.js中添加external配置

module.exports = {
    configureWebpack:{
        externals:{
            'vue':'Vue',
            'vue-router':'VueRouter',
            'axios':'axios',
            'element-ui':'Element',
            'qs':'Qs'
        }
    }
}

• 在main.js中将import引入的改成require引入

// import Vue from 'vue'
const Vue = require('vue')
// import Element from 'element-ui';
const Element = require('element-ui')
在router.js中
// import VueRouter from 'vue-router'
const VueRouter = require('vue-router')

• 在index.html中引入对应的js文件

• 压缩后的文件体积大小

imagemin-webpack-plugin

图片压缩插件

使用

1.安装

npm install --save-dev imagemin-webpack-plugin

2. 配置

const ImageminPlugin = require('imagemin-webpack-plugin').default;

module.exports = {
    new ImageminPlugin({
        disable: process.env.NODE_ENV !== 'production', // 开发时不启用
        pngquant: {//图片质量
          quality: '95-100'
        }
    })
}

ProvidePlugin

功能

导入全局，不需要在每个页面import

配置（无需安装）

    new webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery',
        'window.jQuery': 'jquery',
        'window.$': 'jquery',
        moment: 'moment',
        _: 'underscore',
    })

purifycss-webpack

功能

将css从js中提取出来

安装

npm install --save-dev purifycss-webpack

配置

const purifycssWebpack = require('purifycss-webpack');
const glob = require('glob');

module.exports = {
    new purifycssWebpack({
      paths: glob.sync(path.resolve('./src/*.html'))
    }),
}