如何优化自己的html项目,【webpack篇】工程化里，如何优化自己的项目

写在前面

因为业务关系&＃xff0c;涉及到的新老业务较多。因此接触过webpack早期与后期的阶段。

以及vue-cli2、3、4

我们现在已经在使用vue-cli4了

老生常谈的几个优化操作

Dll

剥离公用资源

如何使用(vue-li3、4)的小伙伴可以看以下

先将dll配置文件写好

webpack.dll.config.js

const path &＃61; require(&＃39;path&＃39;);

const webpack &＃61; require(&＃39;webpack&＃39;);

const CopyWebpackPlugin &＃61; require(&＃39;copy-webpack-plugin&＃39;);

const utils &＃61; require(&＃39;../config/utils&＃39;);

const packageSysName &＃61; require(&＃39;../package.json&＃39;).name;

// 这个操作是获取name,打包的时候植入自己的对应的系统 可删除

const sysName &＃61; utils.getSystemName(packageSysName);

// 这个操作是获取name,打包的时候植入自己的对应的系统 可删除

const resolve &＃61; dir &＃61;> path.join(__dirname, &＃39;..&＃39;, dir);

module.exports &＃61; {

entry: {

vue: [&＃39;vue&＃39;, &＃39;vuex&＃39;, &＃39;vue-router&＃39;, &＃39;axios&＃39;],

ec: [&＃39;echarts&＃39;],

utils: [&＃39;moment&＃39;],

ui: [&＃39;element-ui&＃39;]

},

// devtool:&＃39;source-map&＃39;,

output: {

path: path.join(__dirname, &＃39;..&＃39;, &＃39;public/vendor&＃39;),

filename: &＃39;[name].dll.js&＃39;,

library: &＃39;[name]_[hash]&＃39;

},

plugins: [

new webpack.DllPlugin({

path: path.join(__dirname, &＃39;..&＃39;, &＃39;public/vendor&＃39;, &＃39;[name]-manifest.json&＃39;),

name: &＃39;[name]_[hash]&＃39;,

context: process.cwd()

}),

new CopyWebpackPlugin([{

from: resolve(&＃39;./public/vendor&＃39;),

to: resolve(&＃96;./dist/resources/${sysName}/assets/vendor&＃96;),

toType: &＃39;dir&＃39;

}])

],

resolve: {

alias: {

vue$: &＃39;vue/dist/vue.esm.js&＃39;

}

}

};

引入此配置文件于vue.config.js中(vue-cli3、4)

dllEntry.forEach(dll &＃61;> {

result.push(&＃96;resources/${sysName}/assets/vendor/${dll}.dll.js&＃96;)

});

if (IS_PROD) {

Object.keys(externalsMaps.map).forEach(exter &＃61;> {

const {

name,

version

} &＃61; externalsMaps.map[exter];

result.push(&＃96;${name}/v${version}/${name}.js&＃96;);

result.push(&＃96;${name}/v${version}/${name}.css&＃96;);

});

}

return result;

最后使用 html-webpack-tags-plugin 此插件

对其生成的文件在编译过程中自动插入html文件中

静态资源的处理

将css资源单独打包

以下提供案例是webpack 4.39.2的

const MiniCssExtractPlugin &＃61; require(&＃39;mini-css-extract-plugin&＃39;);

new MiniCssExtractPlugin({

// Options similar to the same options in webpackOptions.output

// all options are optional

filename: &＃96;${name}.css&＃96;,

chunkFilename: &＃39;[name].chunk.css&＃39;

});

//loader部分

{

test: /\.scss$/,

use: [{

loader: MiniCssExtractPlugin.loader,

options: {

hmr: process.env.NODE_ENV &＃61;&＃61;&＃61; &＃39;development&＃39;

}

},

&＃39;css-loader&＃39;,

&＃39;postcss-loader&＃39;,

&＃39;sass-loader&＃39;

]

}

img

图片文件我们分为几个策略

一般的icon以及小文件&＃xff0c;使用svg-sprite的模式进行打包。svg可以改变颜色&＃xff0c;这在icon里是十分好用的&＃xff0c;因为icon大多都有不同的状态。

以下提供案例依旧是vue-cli4的

config.module

.rule("images")

.test(/\.(svg|png|jpe?g|gif|webp)(\?.*)?$/)

.exclude

.add(resolve(&＃39;src/assets/image/icons&＃39;))

.add(resolve(&＃39;src/components/menu/icon&＃39;))

.add(resolve(&＃39;src/assets/image/crmMonitor/process&＃39;))

.end()

.use(&＃39;url-loader&＃39;)

.tap(options &＃61;> merge(options, {

limit: 8192, //限制图片大小&＃xff0c;小的图片将转化为base64

fallback: {

loader: &＃39;file-loader&＃39;,

options: {

name: IS_PROD ? &＃96;${staticResource}/img/[name].[ext]&＃96; : &＃96;img/[name].[ext]&＃96;

}

}

}));

config.module

.rule(&＃39;svg-sprite-loader&＃39;)

.test(/\.svg$/)

.include

.add(resolve(&＃39;src/assets/image/icons&＃39;)) //处理svg目录

.add(resolve(&＃39;src/components/menu/icon&＃39;))

.add(resolve(&＃39;src/assets/image/crmMonitor/process&＃39;))

.end()

.use(&＃39;svg-sprite-loader&＃39;)

.loader(&＃39;svg-sprite-loader&＃39;)

.options({

symbolId: &＃39;icon-[name]&＃39;

});

externals

大部分会使用cdn。但是因为我手下的项目都是局域网项目&＃xff1a;)

但也难不倒我这样的小天才

因为我在部门内开发了前端类用库。而这部分的库有很多版本迭代以及多人使用。且部分组件是应该按需加载的。

我将其打包到服务器上后&＃xff0c;提供了地址(并在其中打上版本号)&＃xff0c;并用nginx将其拦截转发。

于是此时&＃xff0c;我的fake cdn就出现了。

结合dll&＃xff0c;与prefetch,preload(什么是prefetch、preload&＃xff0c;争取下一篇提及一下。好东西。)可以按需加载。

具体代码下一章来吧&＃xff5e;&＃xff5e;&＃xff5e;

eslint、 gzip、mock(hmr)

eslint

短话短说&＃xff0c;语法检查&＃xff0c;组内使用的是airbnb的语法。

如何配置&＃xff1f;

根目录下&＃61;》 .eslintrc.js

参考配置

gzip

直接上vue-cli3、4的代码

config.plugin(&＃39;compress&＃39;).use(CompressionWebpackPlugin, [{

algorithm: &＃39;gzip&＃39;,

test: new RegExp(&＃96;\\.(${productionGzipExtensions.join(&＃39;|&＃39;)})$&＃96;),

threshold: 10240,

minRatio: 0.8,

}])

也可以使用uglifyjs-webpack-plugin

mock

我们使用过express的中间件转发&＃xff0c;也使用过webpack-middle-proxy&＃xff0c;以及mock.js

但是都不满足我们的需求&＃xff0c;首先他要先满足能够hmr(热更新)&＃xff0c;最好能直接读取json&＃xff0c;懒

后来我们选用了mocker-api,比较合适于resetful的接口模式

废话

其实工程化我使用过gulp、webpack两个脚手架。

gulp是比较简单易上手的&＃xff0c;所以简单的项目&＃xff0c;比如只是简单gzip后使用的js&＃xff0c;就会使用gulp。他的pipe链条模式印象深刻。webpackChain有点这个意思。

下一篇会详细说下自己写loader plugin的时候遇到的问题