1. 引言
紧接上篇: ASP.NET Core web App 应用第三方 Bootstrap 模板 https://www.jianshu.com/p/4916f380be66 . 这一节我们来讲讲如何优化 ASP.NET Core Web 发布包繁重的问题.
在 ASP.NET Core Web App 中我们可以通过 Bower 或 NPM 来安装一些 JS,CSS 插件, 来方便我们组织前端组件. 但是这也给我带来了一个问题, 那就是发布时需要把安装的 Bower 包或 NPM 包都要打包上传到服务器.
如果现在发布 ASP.NET Core Web App,wwwroot 下已包含到项目中的文件都会被发布. 虽然我们可以使用捆绑和微小的技术对 js,css 进行压缩来减少网页大小来提升加载速度. 但是, 我们发布包的大小却不能减少.
如果我们项目中引用了较少的前端包文件, 也无可厚非. 但当我们引用了较多的包文件时. 那我们的发布包将会占用很大一部分空间. 尤其是当我们进行 CI/CD 时, 将会耗费大量的时间来进行包还原和包文件上传.
2. 思路
我们就以集成 AdminLte 的 ASP.NET Core Mvc 项目为例, 看看发布的包大小究竟有多大.
从上图我们看到发布后 wwwroot/plugins 文件夹就占了很大一部分空间. 而 wwwroot/plugins 中就是安装的 Bower 包.
那这些 Bower 包中的文件我们都有用到吗? 显然没有. 我们就顶多引用了个 js 和 css 文件而已. 到这里, 减负的思路我们就清晰了. 剔除 ASP.NET Core Web 中未引用的 Bower 包文件, 把没有引用到的文件删除不就得了?!
但是你随便打开一个 Bower 包文件夹, 你就不想这么做了, 一个一个删要删到什么时候. 而且如果直接去删除 Bower 包中无用的文件, 可能会影响 bower 包的管理, 比如 bower 包的升级降级.
不卖关子了, 思路如下:
新建一个文件夹, 将引用的文件复制到另外的目录.(保持原 bower 包中的目录层级)
修改项目中的引用到新的文件夹拷贝路径下.
将原来的 wwwroot\plugins 排除到项目外(Exclude From Project)
你可能会说, 这么复杂啊, 还不如我一个一个删除啊. 别怕, 我们让这一切自动化. 而这个自动化工具就是 Gulp.js https://www.gulpjs.com.cn/ .
3. 行动
以我们之前的 Demo https://github.com/yanshengjie/ApplyBootstrapTheme 为例.
全局安装 gulp:
$ npm install --global gulp
作为项目的开发依赖 (devDependencies) 安装:
$ npm install --save-dev gulp
- $ npm install --save-dev path
- $ npm install --save-dev del
安装成功后会在项目根目录创建 package-lock.json 文件和 node_components 文件夹.
在项目根目录下创建一个名为 gulpfile.js 的文件. 将以下代码粘贴复制进去.
- const gulp = require('gulp');//1. 引用 gulp
- var path = require('path');//2. 引用 path
- var del = require('del');//3. 引用 del
- // 定义路径
- const paths = {
- src: 'wwwroot/plugins/',
- dest: 'wwwroot/lib/'
- };
- // 定义需要完整复制的 Bower 文件夹
- const copyFolders = [
- "bootstrap",
- "font-awesome"
- ];
- // 定义项目中需要引用的 bower 包中的 js,css 文件
- const copyFiles = [
- "Ionicons/css/ionicons.css",
- "jquery/dist/jquery.min.js",
- "bootstrap/dist/js/bootstrap.min.js"
- ];
- // 在复制之前先清空生成目录
- gulp.task('clean:all', function (cb) {
- del([paths.dest], cb);
- });
- // 复制文件
- gulp.task('copy:file', () => {
- // 循环遍历文件列表
- var tasks = copyFiles.map(function (file) {
- // 拼接文件完整路径
- var scrFullPath = path.join(`${paths.src}`, file);
- // 拼接完整目标路径
- var index = file.lastIndexOf('/');
- var destPath = file.substring(0, index);
- var destFullPath=path.join(`${paths.dest}`, destPath);
- return gulp.src(scrFullPath)
- .pipe(gulp.dest(destFullPath));
- });
- });
- // 复制文件夹
- gulp.task('copy:folder', () => {
- var tasks = copyFolders.map(function (folder) {
- // 拼接完整目标路径
- var destFullPath = path.join(`${paths.dest}`, folder);
- return gulp.src(path.join(`${paths.src}`, folder + '/**/*'))
- .pipe(gulp.dest(destFullPath));
- });
- });
- // 将三个任务组装在一起
- gulp.task('default', ['clean:all', 'copy:file', 'copy:folder']);
代码注释的很详细, 就不过多赘述了. 有一点需要解释下, 为什么需要完整拷贝 bootstrap 和 font-awesome 呢? 因为引用的 font-awesome.min.css 会引用包文件的一些字体文件等, 为了省事, 就把包全部拷贝了一遍. 而一般绝大多数包都是简单拷贝 css 和 js 文件就 ok 了的. 而至于什么时候拷贝文件, 什么时候文件夹. 很简单, 默认先拷贝文件, 运行项目, 然后浏览器 F12, 如果发现有无法加载的 error, 那就是了.
运行 gulp
右键 gulpfile.js-->Task Runner Exploerer-->双击 Gulpfile.js-Tasks-default, 即可运行. 操作动图如下:
运行后, 需要复制的 Bower 包文件和文件夹就会复制到 wwwroot\lib 文件夹下. 如图:
将 bower 包安装文件夹排除到项目外.
更新项目中现有文件的引用到 lib 目录下.
That's all, thank you.
4. 效果
重新发布, 我们可以发现发布的包大小已有 40M 减小到 8M.
来源: https://www.cnblogs.com/sheng-jie/p/9122582.html