webpack 3 优化

Posted _NKi

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了webpack 3 优化相关的知识,希望对你有一定的参考价值。

编译时间太长

项目为多页面应用时,编译的时候每个入口都会读取依赖的路径,所以入口越多,会导致编译越慢

公用库提取

除了公用的框架(如 Vue、React)以外,不同页面所需要的第三方库可能不一样,而且部分第三方库(如富文本编辑器、SDK)仅在特定页面引用。全部打包为 vendor 会导致其他页面也加载不必要的第三方库,增加加载时间

优化方案1

特定页面的第三方库直接引入 CDN 文件,不经过 webpack 读取路径
这样能特定的页面加载特定的第三方库,在页面加载 vendor 时不会浪费过多的时间
但是,这样并不能解决编译时间太长

优化方案2

使用 webpack 的 plugin:DllPlugin 和 DllReferencePlugin
这两个插件可以将公共的第三方库打包为 Dll (动态链接库),同时由 Dll 告诉 webpack ,哪些库不需要读取及打包, webpack 就不会在每次编译时都重复读取依赖,可以减少大量的编译时间。
同时由于提取了公用库,每个页面仅加载最基础的库(如 Vue、Vuex、Vue-Router),可以减少加载时间。
特定的页面引入特定的第三方库,可由 CDN 引入

DllPlugin 和 DllReferencePlugin 使用方法

创建 webpack.vendor.build.conf.js 文件

// webpack.vendor.build.conf.js
const path = require("path")
const webpack = require("webpack")
const config = require(‘./config‘)
process.env.NODE_ENV = ‘production‘ // 将 NODE_ENV 设置为 production 可减少依赖的大小

function resolve (dir) {
    return path.join(__dirname, ‘..‘, dir)
}

module.exports = {
    entry: {
        vendor: config.common.vendor // 公用第三方库
    },
    output: {
        path: resolve(‘dll‘),
        filename: ‘[name].js‘,
        library: ‘[name]‘
    },
    plugins: [
        new webpack.DefinePlugin({
          ‘process.env‘: {
            NODE_ENV: JSON.stringify(process.env.NODE_ENV), 
          }
        }),
        new webpack.DllPlugin({
            path: resolve(‘dll/manifest.json‘),
            name: ‘[name]‘
        }),
        // 压缩代码
        new webpack.optimize.UglifyJsPlugin({
          compress: {
            warnings: false,
            pure_funcs: [‘console.log‘]
          },
          sourceMap: true
        }),
    ]
}

运行 node webpack.vendor.build.conf.js 会在上级目录生成 dll 文件夹,里面有 vendor.js 及 manifest.json

接着,在构建文件中增加

// webpack.prod.conf.js
// ...
const manifest = require(‘../dll/manifest.json‘)
const AddAssethtmlPlugin = require(‘add-asset-html-webpack-plugin‘)

module.exports = {
    // ...
    // 引入 manifest,让 webpack 跳过公用库
    new webpack.DllReferencePlugin({
      manifest
    }),
    // 将 vendor 注入到 生成的 html 模板中
    new AddAssetHtmlPlugin({
      filepath: path.resolve(__dirname, ‘../dll/vendor.js‘),
      includeSourcemap: false,
      // hash: true,
    })
}















以上是关于webpack 3 优化的主要内容,如果未能解决你的问题,请参考以下文章

(webpack系列二)webpack打包优化探索

(webpack系列二)webpack打包优化探索

webpack体积怎么优化?有哪些方法?

优化 Webpack 的构建速度

优化 Webpack 的构建速度

Webpack打包体积与速度优化