webpack 优化打包大全

npm install webpack-bundle-analyzer -D
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
plugins:[
  new BundleAnalyzerPlugin(),
]

npm install speed-measure-webpack-plugin --save-dev

// 分析打包时间
const SpeedMeasurePlugin = require('speed-measure-webpack-plugin')
const smp = new SpeedMeasurePlugin()
// ...
module.exports = {
  configureWebpack: smp.wrap({
    plugins: [new BundleAnalyzerPlugin()],
  }),
}

const router = [
 {
   path: '/index',
   component: (resolve) => require.ensure([], () => resolve(require('@/components/index'))),
 },
 {
   path: '/about',
   component: (resolve) => require.ensure([], () => resolve(require('@/components/about'))),
 },
]

// 引入全部组件
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)

// 按需引入组件
import { Button } from 'element-ui'
Vue.component(Button.name, Button)

// 在main.js引入
import Vue from vue
import Vuelidate from 'vuelidate'
Vue.use(Vuelidate)

// 按组件按需引入
import { Vuelidate } from 'vuelidate'

//细节配置修改
chainWebpack: (config) => {
 // 移除 prefetch 插件
 config.plugins.delete('prefetch-index')
 // 移除 preload 插件
 config.plugins.delete('preload-index')
}

import(/* webpackPrefetch: true */ './someAsyncComponent.vue')

module: {
  rules: [
    {
      test: /\.js$/,
      loader: 'babel-loader?cacheDirectory',
      include: [resolve('src')],
    },
  ]
}

 resolve: {
   extensions: ['.js', '.vue', '.json'],
   alias: {
     'vue$': 'vue/dist/vue.esm.js',
     '@': resolve('src'),
   }
 },

module:{
   noParse:/jquery/,//不去解析jquery中的依赖库
 ...
},

plugins: [
 new UglifyJsPlugin({
   uglifyOptions: {
     compress: {
       warnings: false
     }
   },
   sourceMap: true,
   parallel: true
 })

plugins: [
 new ParallelUglifyPlugin({
   //缓存压缩后的结果，下次遇到一样的输入时直接从缓存中获取压缩后的结果并返回，
   //cacheDir 用于配置缓存存放的目录路径。
   cacheDir: '.cache/',
   sourceMap: true,
   uglifyJS: {
     output: {
       comments: false,
     },
     compress: {
       warnings: false,
     },
   },
 }),
]

const TerserPlugin = require('terser-webpack-plugin') // 压缩js代码
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin') // 压缩css代码

optimization: {
 minimizer: [
   new TerserPlugin({
     parallel: 4, // 开启几个进程来处理压缩，默认是 os.cpus().length - 1
     cache: true, // 是否缓存
     sourceMap: false,
   }),
 ]
}

const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin') // 压缩css代码

optimization: {
 minimizer: [
   // 压缩css
   new OptimizeCSSAssetsPlugin({}),
 ]
}

plugins: [
 new webpack.optimize.CommonsChunkPlugin({
   name: 'vendor',
   minChunks: function (module, count) {
     console.log(module.resource, `引用次数${count}`)
     //"有正在处理文件" + "这个文件是 .js 后缀" + "这个文件是在 node_modules 中"
     return (
       module.resource &&
       /\.js$/.test(module.resource) &&
       module.resource.indexOf(path.join(__dirname, './node_modules')) === 0
     )
   },
 }),
 new webpack.optimize.CommonsChunkPlugin({
   name: 'common',
   chunks: 'initial',
   minChunks: 2,
 }),
]

module.exports = {
 optimization: {
   splitChunks: {
     cacheGroups: {
       vendor: {
         priority: 1, //添加权重
         test: /node_modules/, //把这个目录下符合下面几个条件的库抽离出来
         chunks: 'initial', //刚开始就要抽离
         minChunks: 2, //重复2次使用的时候需要抽离出来
       },
       common: {
         //公共的模块
         chunks: 'initial',
         minChunks: 2,
       },
     },
   },
 },
}

const path = require('path')
const webpack = require('webpack')
module.exports = {
 entry: {
   vendor: [
     'vue-router',
     'vuex',
     'vue/dist/vue.common.js',
     'vue/dist/vue.js',
     'vue-loader/lib/component-normalizer.js',
     'vue',
     'axios',
     'echarts',
   ],
 },
 output: {
   path: path.resolve('./dist'),
   filename: '[name].dll.js',
   library: '[name]_library',
 },
 plugins: [
   new webpack.DllPlugin({
     path: path.resolve('./dist', '[name]-manifest.json'),
     name: '[name]_library',
   }),
   // 建议加上代码压缩插件，否则dll包会比较大。
   new webpack.optimize.UglifyJsPlugin({
     compress: {
       warnings: false,
     },
   }),
 ],
}

new webpack.DllReferencePlugin({
 manifest: require('../dist/vendor-manifest.json'),
})

 "scripts": {
   "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
   "start": "npm run dev",
   "lint": "eslint --ext .js,.vue src",
   "build": "node build/build.js",
   "build:dll": "webpack --config build/webpack.dll.conf.js"
 }

<script type="text/javascript" src="./vendor.dll.js"></script>

<head>
 <link rel="stylesheet" href="https://cdn.bootcss.com/element-ui/2.0.7/theme-chalk/index.css" />
</head>
<body>
 <div id="app"></div>
 <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
 <script src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.min.js"></script>
 <script src="https://cdn.bootcss.com/vuex/3.1.0/vuex.min.js"></script>
 <script src="https://cdn.bootcss.com/vue-router/3.0.2/vue-router.min.js"></script>
 <script src="https://cdn.bootcss.com/element-ui/2.6.1/index.js"></script>
 <!-- built files will be auto injected -->
</body>

module.exports = {
···
   externals: {
     'vue': 'Vue',
     'vuex': 'Vuex',
     'vue-router': 'VueRouter',
     'element-ui': 'ELEMENT',
     'Axios':'axios'
   }
 },

npm uninstall axios element-ui vue vue-router vuex

// import Vue from 'vue'
// import ElementUI from 'element-ui'
// import 'element-ui/lib/theme-chalk/index.css'
// import VueRouter from 'vue-router'

import App from './App.vue'
import routes from './router'
import utils from './utils/Utils'

Vue.use(ELEMENT)
Vue.use(VueRouter)

const router = new VueRouter({
 mode: 'hash', //路由的模式
 routes,
})

new Vue({
 router,
 el: '#app',
 render: (h) => h(App),
})

// webpack.config.js文件
const HtmlWebpackExternalsPlugin = require('html-webpack-externals-plugin')

module.exports = {
 plugins: [
   new HtmlWebpackExternalsPlugin({
     externals: [
       {
         // 引入的模块
         module: 'jquery',
         // cdn的地址
         entry: 'https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js',
         // 挂载到了window上的名称
         global: 'jQuery',
       },
       {
         module: 'vue',
         entry: 'https://cdn.bootcss.com/vue/2.6.10/vue.min.js',
         global: 'Vue',
       },
     ],
   }),
 ],
}

module.exports = {
 module: {
   rules: [
     {
       test: /\.js$/,
       include: path.resolve('src'),
       use: ['thread-loader', 'expensive-loader'],
     },
   ],
 },
}

npm i -D happypack

module: {
 rules: [
   {
     test: /\.js$/,
     use: ['happypack/loader?id=babel'],
     include: [resolve('src'), resolve('test')],
     exclude: path.resolve(__dirname, 'node_modules'),
   },
   {
     test: /\.vue$/,
     use: ['happypack/loader?id=vue'],
   },
 ]
}

const HappyPack = require('happypack')
// 构造出共享进程池，在进程池中包含5个子进程
const HappyPackThreadPool = HappyPack.ThreadPool({ size: 5 })
plugins: [
 new HappyPack({
   // 用唯一的标识符id，来代表当前的HappyPack是用来处理一类特定的文件
   id: 'babel',
   // 如何处理.js文件，用法和Loader配置中一样
   loaders: ['babel-loader?cacheDirectory'],
   threadPool: HappyPackThreadPool,
 }),
 new HappyPack({
   id: 'vue', // 用唯一的标识符id，来代表当前的HappyPack是用来处理一类特定的文件
   loaders: [
     {
       loader: 'vue-loader',
       options: vueLoaderConfig,
     },
   ],
   threadPool: HappyPackThreadPool,
 }),
]

npm i compression-webpack-plugin --save

const CompressionPlugin = require('compression-webpack-plugin')
module.exports = {
 configureWebpack: (config) => {
   if (progress.env.NODE_ENV === 'production') {
     return {
       plugins: [
         new CompressionPlugin({
           test: /\.js$|\.html$|.\css/, //匹配文件名
           threshold: 10240, //对超过10k的数据压缩
           deleteOriginalAssets: false, //不删除源文件
         }),
       ],
     }
   }
 },
}

npm uninstall compression-webpack-plugin

npm i compression-webpack-plugin@5.0.1