js提取指定网站内容( vue-cli3DllPlugin提取公用库,需要的朋友可以参考)

　　js提取指定网站内容(

vue-cli3DllPlugin提取公用库,需要的朋友可以参考)

　　vue-cli3 DllPlugin 提取公共库的方法

　　更新时间：2019-04-24 09:26:41 作者：lifefriend_007

　　本文文章主要介绍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，输入如下内容。

　　

const path = require('path')

const webpack = require('webpack')

const CleanWebpackPlugin = require('clean-webpack-plugin')

// dll文件存放的目录

const dllPath = 'public/vendor'

module.exports = {

entry: {

// 需要提取的库文件

vendor: ['vue', 'vue-router', 'vuex', 'axios', 'element-ui']

},

output: {

path: path.join(__dirname, dllPath),

filename: '[name].dll.js',

// vendor.dll.js中暴露出的全局变量名

// 保持与 webpack.DllPlugin 中名称一致

library: '[name]_[hash]'

},

plugins: [

// 清除之前的dll文件

new CleanWebpackPlugin(['*.*'], {

root: path.join(__dirname, dllPath)

}),

// 设置环境变量

new webpack.DefinePlugin({

'process.env': {

NODE_ENV: 'production'

}

}),

// manifest.json 描述动态链接库包含了哪些内容

new webpack.DllPlugin({

path: path.join(__dirname, dllPath, '[name]-manifest.json'),

// 保持与 output.library 中名称一致

name: '[name]_[hash]',

context: process.cwd()

})

]

}

　　3、生成dll

　　将以下命令添加到 package.json

　　

"scripts": {

...

"dll": "webpack -p --progress --config ./webpack.dll.conf.js"

},

　　控制台操作

　　纱线运行dll

　　4、忽略编译文件

　　为了节省编译时间，我们需要告诉webpack此时公共库文件已经编译完成，以减少webpack对公共库的编译时间。在项目根目录中找到vue.config.js（如果没有就创建），配置如下：

　　

const webpack = require('webpack')

module.exports = {

...

configureWebpack: {

plugins: [

new webpack.DllReferencePlugin({

context: process.cwd(),

manifest: require('./public/vendor/vendor-manifest.json')

})

]

}

}

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

　　经过以上配置，公共库被解压出来，编译速度更快，但是如果不引用生成的dll文件，网页将无法正常运行。

　　打开 public/index.html 并插入脚本标签。

　　

...

　　至此，公共库提取完成，但总觉得最后手动插入脚本不优雅。下面介绍如何自动导入生成的dll文件。

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

　　

const path = require('path')

const webpack = require('webpack')

const AddAssetHtmlPlugin = require('add-asset-html-webpack-plugin')

　　

module.exports = {

...

configureWebpack: {

plugins: [

new webpack.DllReferencePlugin({

context: process.cwd(),

manifest: require('./public/vendor/vendor-manifest.json')

}),

// 将 dll 注入到 生成的 html 模板中

new AddAssetHtmlPlugin({

// dll文件位置

filepath: path.resolve(__dirname, './public/vendor/*.js'),

// dll 引用路径

publicPath: './vendor',

// dll最终输出的目录

outputPath: './vendor'

})

]

}

}

　　总结

　　以上就是小编介绍的vue-cli3 DllPlugin提取公共库的方法。我希望它会对你有所帮助。如有问题，请给我留言，小编会及时回复您。非常感谢您对脚本之家网站的支持！

　　如果觉得本文对您有帮助，欢迎转载，请注明出处，谢谢！