本文是继笔者上一篇文章 <> 基础上进一步优化的实践经验分享!
随着我们的项目的增长,打包会越来越慢。每次打包都会将第三方的 js 打包一遍,但是这些第三方的不会经常变化,如何能将第三方的 js 只打包一次呢?
我们先将路由组件改成异步组件。 官方文档
- // src/router/index.js
- ...export
- default new vueRouter({
- routes:
- [{
- path:
- '/',
- name: 'HelloWorld',
- component: resolve = >require(['@/components/HelloWorld'], resolve)
- }]
- })
webpack 提供了一个插件
,用于将不常变动的 js 单独打包。
- DllPlugin
目录下新建
- src
来
- vendor.js
第三方的 js:
- import
- import 'babel-polyfill'
- import Vue from 'vue'
- import Vuex from 'vuex'
- import VueRouter from 'vue-router'
- import {sync} from 'vuex-router-sync'
- import axios from 'axios'
- import ElementUI from 'element-ui'
这里只需要 import 进来就行了。
目录下新建
- build
配置文件:
- webpack.dll.conf.js
- var path = require('path') var webpack = require('webpack')
- var context = path.join(__dirname, '..')
- module.exports = {
- entry: {
- vendor: ['./src/vendor.js'] // entry 以项目根目录为起始路径
- },
- output: {
- // 将打包后的 js 放到 static 目录下,build的时候会copy到dist目录
- path: path.join(context, 'static/js'),
- filename: '[name].dll.js',
- library: '[name]'
- },
- resolve: {
- alias: {
- 'vue$': 'vue/dist/vue.esm.js'
- }
- },
- plugins: [new webpack.DllPlugin({
- path: path.join(context, '[name].manifest.json'),
- name: '[name]',
- context: context
- }),
- // 压缩js代码
- new webpack.optimize.UglifyJsPlugin({
- compress: {
- warnings: false
- },
- output: { // 删除打包后的注释
- comments: false
- }
- })]
- }
这里的 context 非常关键,我这里以项目的根路径作为 context,
的位置可自由定义,
- manifest.json
要和
- name
里面的
- output
保持一致。resolve 里将
- library
里面的
- webpack.base.conf.js
copy 过来,vue 用的是
- vue$
。需要注意的是
- vue.esm.js
只支持
- dllPlugin
类型的
- Array
。
- entry
里面加上 script :
- package.json
- build:all
- "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 --progress"
- }
运行
,会在
- npm run build:dll
里面生成
- static/js
- vendor.dll.js
到这里我们的第三方 js 就打包完了,那么如何使用呢?
。修改
- DllReferencePlugin
:
- build/webpack.base.conf.js
- const webpack = require('webpack')
- module.exports = {
- ...
- plugins: [
- new webpack.DllReferencePlugin({
- // name参数和dllplugin里面name一致,可以不传
- name: 'vendor',
- // dllplugin 打包输出的manifest.json
- manifest: require('../vendor.manifest.json'),
- // 和dllplugin里面的context一致
- context: path.join(__dirname, '..')
- })
- ]
- ...
- }
注意:这里的
一定要和 dllplugin 里面的
- context
保持一致
- context
。删除上一篇文章中配置的
- build/webpack.prod.js
配置项:
- externals
- module.exports = {
- ...
- // externals: {
- // 'vue': 'Vue',
- // 'vuex': 'Vuex',
- // 'vue-router': 'VueRouter',
- // 'element-ui': 'ELEMENT'
- // }
- ...
- plugins: [
- ...
- // 去掉这里的CommonsChunkPlugin
- // new webpack.optimize.CommonsChunkPlugin({
- // name: 'vendor',
- // minChunks (module) {
- // // any required modules inside node_modules are extracted to vendor
- // return (
- // module.resource &&
- // /\.js$/.test(module.resource) &&
- // module.resource.indexOf(
- // path.join(__dirname, '../node_modules')
- // ) === 0
- // )
- // }
- // }),
- // 去掉这里的CommonsChunkPlugin
- // new webpack.optimize.CommonsChunkPlugin({
- // name: 'manifest',
- // minChunks: Infinity
- // }),
- ...
- ]
- }
去掉这两个
,因为我们已经通过 dllplugin 打包了,这里就不需要了。
- CommonsChunkPlugin
和
- index.dev.html
合并成一个文件
- index.prod.html
,去掉 CDN 资源,引入
- index.html
:
- vendor.dll.js
- <head>
- ...
- <
- link
- rel
- =
- "stylesheet"
- href
- =
- "https://cdn.bootCSS.com/element-ui/2.0.7/theme-chalk/index.css"
- >
- </head>
- <body>
- <div id="app"></div>
- <!-- built files will be auto injected -->
- <script src="static/js/vendor.dll.js"></script>
- </body>
这里
的样式文件依然采用 CDN 加载,因为我们没有将样式打包到
- element-ui
里面
- vendor.dll.js
和
- webpack.dev.conf.js
里面的模板文件的配置:
- webpack.prod.conf.js
- ...
- plugins: [
- ...
- new HtmlWebpackPlugin({
- template: 'index.html'
- })
- ]
里面
- src
、
- vuex
的使用:
- vue-router
- // src/router/index.js
- import Vue from 'vue'
- import VueRouter from 'vue-router'
- Vue.use(VueRouter)
- // src/store/index.js
- import Vue from 'vue'
- import Vuex from 'vuex'
- Vue.use(Vuex)
至此,我们所有的准备工作就做完了。接下来运行
,启动本地开发服务:
- npm run dev
打包:
,然后部署到 nginx 服务,启动 nginx 服务:
- npm run build
之所以将
放在
- vendor.dll.js
目录下,是为了方便开发和发布使用相同的路径。为了保持
- static/js
的 js 和样式版本一致,可以在项目中加入
- element-ui
或
- less
等,然后
- scss
进来就可以了,这样打包的时候就会单独打包到 css 里面。
- @import
示例项目传送门: vue-spa-starter-kit ,欢迎大家吐槽和
!
- star
来源: https://juejin.im/post/5a3251ee6fb9a0450f21f6ac