vue-lice3项目利用DLLPlugin 和 DLLRe组件，大幅提高wbpack打包速度

webpack文档

官方描述如下，注意按看usage部分内容

DLLPlugin 和 DLLReferencePlugin 用某种方法实现了拆分 bundles，同时还大大提升了构建的速度。

第一步-新建自定义的webpack打包配置

根目录下新建webpack.dll.conf.js

const fs = require('fs')
const path = require('path')
const webpack = require('webpack')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const vendors = [['vue', 'vuex', 'vue-resource','echarts','element-ui','fabric','html2canvas','qrcode.vue','vue-router','vue-class-component','vue-lazyload','js-cookie'],//  [//   'echarts'// ], [//   'element-ui'// ],[//   'fabric','html2canvas','qrcode.vue'// ]
]// dll文件存放的目录
const dllPath = './build/dll'
module.exports = {entry: { // 多入口，单入口情况，只需写一个，key值自定义，value值为数组// vue: vendors[0],// echarts: vendors[1],// elementUI: vendors[2],libs: vendors[0],},output: {path: path.join(__dirname, dllPath),filename: '[name].[chunkhash].dll.js',library: '[name]_[chunkhash]'},plugins: [// 清除之前的dll文件new CleanWebpackPlugin(),// new UglifyJsPlugin(),new webpack.DllPlugin({path: path.join(__dirname, dllPath, '[name]-manifest.json'),name: '[name]_[chunkhash]',context: __dirname})]
}

第二步-新增指令

修改package.json，新增npm run dll指令

  "scripts": {"clean": "rimraf node_modules","dll": "webpack -p --progress --config ./webpack.dll.conf.js","dev": "vue-cli-service serve","serve": "vue-cli-service serve","build": "vue-cli-service build --mode pro --report-json","buildtest": "vue-cli-service build --mode test","lint": "vue-cli-service lint","push": "node ./push.js"},

第三步-修改vue-cli配置

3.需要修改下根目录下vue.config.js，如果没有自己建一个

// vue.config.js
const environment = require('./build/environment.ts')
const webpack = require('webpack')
const AddAssetHtmlPlugin = require('add-asset-html-webpack-plugin')
const path = require('path')module.exports = {// options...publicPath: process.env.NODE_ENV === 'production' ? './' : '/',
//重点在这里configureWebpack:(config)=>{if(process.env.NODE_ENV === 'production'){config.plugins.push(// 引用动态链接库new webpack.DllReferencePlugin({manifest: path.resolve(__dirname, "./build/dll/libs-manifest.json")}))config.plugins.push(// 将 dll 注入到 生成的 html 模板中new AddAssetHtmlPlugin({// dll文件位置filepath: path.resolve(__dirname, './build/dll/*.js'),// dll 引用路径publicPath: 'dll',// dll最终输出的目录outputPath: 'dll'}))}},devServer: {proxy: {'/api': {target: 'https://newo2o.bafangka.com/api', // 'https://new401t.bafangka.com/api',changeOrigin: true,// http2: true,ws: true,pathRewrite: {'^/api': ''}}}}}

效果

编译时间减少66%

vue-lice3项目利用DLLPlugin 和 DLLRe组件，大幅提高wbpack打包速度相关推荐

vue商城项目开发：封装banner组件、组件参数传递
封装banner组件在Home组件中引入: components: 在template中使用: 组件参数传递轮播图可以封装成组件,但是每个页面要展示的图片内容可能不一样,所以要进行参数传递,你传什 ...
vue 前端项目部署阿里云服务器
vue 前端项目部署阿里云服务器 one 前期准备 two 代码打包扔服务器 one 前期准备首先两个软件应该下载(Xftp Xshell),如果有其他类似的软件也可以. 打开xftp,新建一个会 ...
vue项目利用预渲染prerender-spa-plugin处理seo --viga
vue项目利用预渲染处理seo 写在前面什么是SEO? SEO是英文 Search Engine Optimization 的缩写,中文意思"搜索引擎优化".SEO是指在了解搜索 ...
vue.js项目实战运用篇之抖音视频APP-第三节：底部导航栏组件功能
[温馨提示]:若想了解更多关于本次项目实战内容,可转至vue.js项目实战运用篇之抖音视频APP-项目规划中进一步了解项目规划. [项目地址] 项目采用Git进行管理,最终项目将会发布到GitHub中 ...
vue项目的骨架及常用组件介绍
vue项目基础结构一个vue的项目,我觉得最小的子集其实就是{vue,vue-router,component},vue作为基础库,为我们提供双向绑定等功能.vue-router连接不同的" ...
vue项目中element-ui的分页器(组件封装）
vue项目中element-ui的分页器组件 <template><el-col :span="24" class="toolbar" sty ...
使用vue-cli创建Vue工程化项目及单文件组件的创建和调用
文章目录 1. Vue 单文件组件的优势 2. cli 创建 Vue 工程项目 3. 单文件组件的创建和调用 1. Vue 单文件组件的优势把一个组件全部内容汇合到一个文件中,文件名字是以 .vue ...
vue.js项目实战运用篇之抖音视频APP-第四节：顶部导航栏组件功能
[温馨提示]:若想了解更多关于本次项目实战内容,可转至vue.js项目实战运用篇之抖音视频APP-项目规划中进一步了解项目规划. [项目地址] 项目采用Git进行管理,最终项目将会发布到GitHub中 ...
Vue前端项目-登录组件-登录框界面
目录 1.登录框组件设计 1.1 表单元素组件注册 1.2 登录组件的结构和样式 2.Icon 图标 2.1 拷贝 font 文件夹到 asserts 目录 2.2 引入 font 的 css 样式 ...

vue-lice3项目利用DLLPlugin 和 DLLRe组件，大幅提高wbpack打包速度

webpack文档

第一步-新建自定义的webpack打包配置

第二步-新增指令

第三步-修改vue-cli配置

效果

vue-lice3项目利用DLLPlugin 和 DLLRe组件，大幅提高wbpack打包速度相关推荐

最新文章

热门文章