用法
项目结构如下:
project
|- bulid <!-- 这个目录是自动生成的-->
|- public
|- css
|- js
|- page1.html <!-- 插件生成的html文件-->
|- page2.html <!-- 插件生成的html文件-->
...
|- public/ <!-- 存放字体、图片、网页模板等静态资源-->
|- src <!-- 源码文件夹--> |- components/ |- css/ |- js/ |- page1.js <!-- 每个页面唯一的VUE实例,需绑定到#app--> |- page2.js <!-- 每个页面唯一的VUE实例,需绑定到#app--> ... |- package.json |- package-lock.json |- README.md
public文件夹存放一些静态文件,src文件夹存放源码。每个页面通过一个入口文件(page1.js,page2.js,..)生成vue实例,挂载到插件生成的html文件的#app元素上。
安装依赖
npm install
介绍
代码分割
在webpack4中使用optimization.splitChunks进行分割.
const path = require('path');
module.exports = {
// ... 省略其他内容
optimization:{
runtimeChunk:{
name:'./js/runtime'
},
splitChunks:{
// 避免过度分割,设置尺寸不小于30kb
//cacheGroups会继承这个值
minSize:30000,
cacheGroups:{
//vue相关框架
main:{
test: /[\\/]node_modules[\\/]vue[\\/]/,
name: './js/main',
chunks:'all'
},
//除Vue之外其他框架
vendors:{
test:/[\\/]node_modules[\\/]?!(vue)[\\/]/,
name: './js/vendors',
chunks:'all'
},
//业务中可复用的js
extractedJS:{
test:/[\\/]src[\\/].+\.js$/,
name:'./js/extractedJS',
chunks:'all'
}
}
}
}
};
runtimeChunk包含了一些webapck的样板文件,使得你在不改变源文件内容的情况下打包,哈希值仍然改变,因此我们把他单独提取出来,点这儿了解更多。
cacheGroups用于提取复用的模块,test会尝试匹配(模块的绝对路径||模块名),返回值为true且满足条件的模块会被分割。满足的条件可自定义,比如模块最小应该多大尺寸、至少被导入进多少个chunk(即复用的次数)等。默认在打包前模块不小于30kb才被会分割。
树抖动
在package.json里加入
"sideEffects":[".css",".less","*.sass"]
复制代码该数组之外的文件将会受到树抖动的影响——未使用的代码将会从export导出对象中剔除。这将大大减少无用代码。如果树抖动对某些文件具有副作用,就把这些文件名放进数组以跳过此操作。css文件(包括.less,.sass)都必须放进来,否则会出现样式丢失。
插件的使用
其他
public用于存放静态资源,打包后也会在build/下创建一个同名文件夹,里面存放的是public会被使用到的资源。如果在.css文件里引用了public里的资源,如图片,添加url的时候要使用绝对路径:
<!-- src/css/page1.css -->
.bg-img {
background-image:url(/public/images/1.jpg)
}
复制代码这样通过 http/https 打开的时候就能正常使用,如果是以文件形式打开(比如打包后双击page1.html),会发现浏览器显示无法找到资源。通过导入图片作为变量引用(import name from path),既可使用绝对路径,也可使用相对路径。