zoukankan      html  css  js  c++  java
  • vue-cli3 DllPlugin 提取公用库

    vue 开发过程中,保存一次就会编译一次,如果能够减少编译的时间,哪怕是一丁点,也能节省不少时间。开发过程中个人编写的源文件才会频繁变动,而一些库文件我们一般是不会去改动的。如果能把这些库文件提取出来,就能减少打包体积,加快编译速度。本文主要讲述在 vue-cli3 中利用 DllPlugin 来进行预编译。

    1、安装相关插件

    yarn add webpack-cli@^3.2.3 add-asset-html-webpack-plugin@^3.1.3 clean-webpack-plugin@^1.0.1 --dev

    2、编写配置文件

    在项目根目录下新建 webpack.dll.conf.js,输入以下内容。

     1 const path = require('path')
     2 const webpack = require('webpack')
     3 const CleanWebpackPlugin = require('clean-webpack-plugin')
     4 
     5 // dll文件存放的目录
     6 const dllPath = 'public/vendor'
     7 
     8 module.exports = {
     9   entry: {
    10     // 需要提取的库文件
    11     vendor: ['vue', 'vue-router', 'vuex', 'axios', 'element-ui']
    12   },
    13   output: {
    14     path: path.join(__dirname, dllPath),
    15     filename: '[name].dll.js',
    16     // vendor.dll.js中暴露出的全局变量名
    17     // 保持与 webpack.DllPlugin 中名称一致
    18     library: '[name]_[hash]'
    19   },
    20   plugins: [
    21     // 清除之前的dll文件
    22     new CleanWebpackPlugin(['*.*'], {
    23       root: path.join(__dirname, dllPath)
    24     }),
    25     // 设置环境变量
    26     new webpack.DefinePlugin({
    27       'process.env': {
    28         NODE_ENV: 'production'
    29       }
    30     }),
    31     // manifest.json 描述动态链接库包含了哪些内容
    32     new webpack.DllPlugin({
    33       path: path.join(__dirname, dllPath, '[name]-manifest.json'),
    34       // 保持与 output.library 中名称一致
    35       name: '[name]_[hash]',
    36       context: process.cwd()
    37     })
    38   ]
    39 }

    3、生成 dll

    在 package.json 中加入如下命令

    "scripts": {
        ...
        "dll": "webpack -p --progress --config ./webpack.dll.conf.js"
    },

    控制台运行

    yarn run dll

    4、忽略已编译文件

    为了节约编译的时间,这时间我们需要告诉 webpack 公共库文件已经编译好了,减少 webpack 对公共库的编译时间。在项目根目录下找到 vue.config.js ( 没有则新建 ),配置如下:

     1 const webpack = require('webpack')
     2 
     3 module.exports = {
     4     ...
     5     configureWebpack: {
     6         plugins: [
     7           new webpack.DllReferencePlugin({
     8             context: process.cwd(),
     9             manifest: require('./public/vendor/vendor-manifest.json')
    10           })
    11         ]
    12     }
    13 }

    5、index.html 中加载生成的 dll 文件

    经过上面的配置,公共库提取出来了,编译速度快了,但如果不引用生成的 dll 文件,网页是不能正常工作的。

    打开 public/index.html,插入 script 标签。

    ...
    <script src="./vendor/vendor.dll.js"></script>

    到此公用库提取完成,但总觉得最后一部手工插入 script 不太优雅,下面介绍下如何自动引入生成的 dll 文件。

    打开 vue.config.js 在 configureWebpack plugins 节点下,配置 add-asset-html-webpack-plugin

     1 const path = require('path')
     2 const webpack = require('webpack')
     3 const AddAssetHtmlPlugin = require('add-asset-html-webpack-plugin')
     4 
     5 module.exports = {
     6     ...
     7     configureWebpack: {
     8         plugins: [
     9           new webpack.DllReferencePlugin({
    10             context: process.cwd(),
    11             manifest: require('./public/vendor/vendor-manifest.json')
    12           }),
    13           // 将 dll 注入到 生成的 html 模板中
    14           new AddAssetHtmlPlugin({
    15             // dll文件位置
    16             filepath: path.resolve(__dirname, './public/vendor/*.js'),
    17             // dll 引用路径
    18             publicPath: './vendor',
    19             // dll最终输出的目录
    20             outputPath: './vendor'
    21           })
    22         ]
    23     }
    24 }

    完。

  • 相关阅读:
    单例模式
    json 格式
    axios 获取不到数据错误
    sprint test 添加事务回滚机制
    springboot An incompatible version [1.1.32] of the APR based Apache Tomcat Native library is installed, while Tomcat requires version [1.2.14]
    spring boot 启动之后404
    废了
    tomcat 部署项目到服务器
    Druid 介绍及配置
    jq 全选
  • 原文地址:https://www.cnblogs.com/lifefriend/p/10479341.html
Copyright © 2011-2022 走看看