精华内容
下载资源
问答
  • 彻底解决Webpack打包问题

    千次阅读 2017-02-19 10:47:27
    这几天写腾讯实习生 Mini ... 加上 React-Router、superagent、eventproxy 这些第三方轮子一共有好几百个 module,Webpack 的打包速度极。这对于开发是非常不好的体验,同时效率也极低。 问题分析 我们先来看

    这几天写腾讯实习生 Mini 项目的时候用上了 React 全家桶,当然同时引入了 Webpack 作为打包工具。但是开发过程中遇到一个很棘手的问题就是,React 加上 React-Router、superagent、eventproxy 这些第三方轮子一共有好几百个 module,Webpack 的打包速度极慢。这对于开发是非常不好的体验,同时效率也极低。

    问题分析

    我们先来看一下完全没有任何优化的时候,Webpack 的打包速度(使用了jsx和babel的loader)。下面是我们的测试文件:

    //test.js
    var react = require('react');
    var ReactAddonsCssTransitionGroup = require('react-addons-css-transition-group');
    var reactDOM = require('react-dom');
    var reactRouter = require('react-router');
    var superagent = require("superagent");
    var eventproxy = require("eventproxy");

    运行

    webpack test.js

    在我的2015款RMBP13,i5处理器,全SSD下,性能是这样的:

    没错你没有看错,这几个第三方轮子加起来有整整668个模块,全部打包需要20多秒。

    这意味着什么呢?你每次对业务代码的修改,gulp 或者 Webpack 监测到后都会重新打包,你要足足等20秒才能看到自己的修改结果。

    但是需要重新打包的只有你的业务代码,这些第三方库是完全不用重新打包的,它们的存在只会拖累打包性能。所以我们要找一些方法来优化这个过程。

    配置externals

    Webpack 可以配置 externals 来将依赖的库指向全局变量,从而不再打包这个库,比如对于这样一个文件:

    import React from 'react';
    console.log(React);

    如果你在 Webpack.config.js 中配置了externals:

    module.exports = {
        externals: {
            'react': 'window.React'
        }
        //其它配置忽略...... 
    };

    等于让 Webpack 知道,对于 react 这个模块就不要打包啦,直接指向 window.React 就好。不过别忘了加载 react.min.js,让全局中有 React 这个变量。

    我们来看看性能,因为不用打包 React 了所以速度自然超级快,包也很小:

    配置externals的缺陷

    问题如果就这么简单地解决了的话,那我就没必要写这篇文章了,下面我们加一个 react 的动画库 react-addons-css-transition-group 来试一试:

    import React from 'react';
    import ReactAddonsCssTransitionGroup from 'react-addons-css-transition-group';
    console.log(React);

    对,你没有看错,我也没有截错图,新加了一个很小很小的动画库之后,性能又爆炸了。从模块数来看,一定是 Webpack 又把 react 重新打包了一遍。

    我们来看一下为什么一个很小很小的动画库会导致 Webpack 又傻傻地把 react 重新打包了一遍。找到 react-addons-css-transition-group 这个模块,然后看看它是怎么写的:

    // react-addons-css-transition-group模块
    // 入口文件 index.js
    module.exports = require('react/lib/ReactCSSTransitionGroup');

    这个动画模块就只有一行代码,唯一的作用就是指向 react 下面的一个子模块,我们再来看看这个子模块是怎么写的:

    // react模块
    // react/lib/ReactCSSTransitionGroup.js
    var React = require('./React');
    var ReactTransitionGroup = require('./ReactTransitionGroup');
    var ReactCSSTransitionGroupChild = require('./ReactCSSTransitionGroupChild');
    //....剩余代码忽略

    这个子模块又反回去依赖了 react 整个库的入口,这就是拖累 Webpack 的罪魁祸首。

    总而言之,问题是这样产生的:

    1. Webpack 发现我们依赖了 react-addons-css-transition-group

    2. Webpack 去打包 react-addons-css-transition-group 的时候发现它依赖了 react 模块下的一个叫 ReactTransitionGroup.js 的文件,于是 Webpack 去打包这个文件。

    3. ReactTransitionGroup.js 依赖了整个 react 的入口文件 React.js,虽然我们设置了 externals ,但是 Webpack 不知道这个入口文件等效于 react 模块本身,于是我们可爱又敬业的 Webpack 就把整个 react 又重新打包了一遍。

    读到这里你可能会有疑问,为什么不能把这个动画库也设置到 externals 里,这样不是就不用打包了吗?

    问题就在于,这个动画库并没有提供生产环境的文件,或者说这个库根本没有提供 react-addons-css-transition-group.min.js 这个文件。

    这个问题不只存在于 react-addons-css-transition-group 中,对于 react 的大多数现有库来说都有这个依赖关系复杂的问题。

    初级解决方法

    所以对于这个问题的解决方法就是,手工打包这些 module,然后设置 externals ,让 Webpack 不再打包它们。

    我们需要这样一个 lib-bundle.js 文件:

    window.__LIB["react"] = require("react");
    window.__LIB["react-addons-css-transition-group"] = require("react-addons-css-transition-group");
    // ...其它依赖包

    我们在这里把一些第三方库注册到了 window.__LIB 下,这些库可以作为底层的基础库,免于重复打包。

    然后执行 webpack lib-bundle.js lib.js,得到打包好的 lib.js。然后去设置我们的 externals :

    var webpack = require('webpack');
    module.exports = {
        externals: {
            'react': 'window.__LIB["react"]',
            'react-addons-css-transition-group': 'window.__LIB["react-addons-css-transition-group"]',
            // 其它库
        }
        //其它配置忽略...... 
    };

    这时由于 externals 的存在,Webpack 打包的时候就会避开这些模块超多,依赖关系复杂的库,把这些第三方 module 的入口指向预先打包好的 lib.js 的入口 window.__LIB,从而只打包我们的业务代码。

    终极解决方法

    上面我们提到的方法本质上就是一种动态链接库(dll)”的思想,这在 windows 系统下面是一种很常见的思想。一个dll包,就是一个很纯净的依赖库,它本身不能运行,是用来给你的 app 或者业务代码引用的。

    同样的 Webpack 最近也新加入了这个功能:webpack.DllPlugin。使用这个功能需要把打包过程分成两步:

    1. 打包ddl包

    2. 引用ddl包,打包业务代码

    首先我们来打包ddl包,首先配置一个这样的 ddl.config.js

    const webpack = require('webpack');
    
    const vendors = [
        'react',
        'react-dom',
        'react-router',
        // ...其它库
    ];
    
    module.exports = {
        output: {
            path: 'build',
            filename: '[name].js',
            library: '[name]',
        },
        entry: {
            "lib": vendors,
        },
        plugins: [
            new webpack.DllPlugin({
                path: 'manifest.json',
                name: '[name]',
                context: __dirname,
            }),
        ],
    };
    

    webpack.DllPlugin 的选项中:

    • path 是 manifest.json 文件的输出路径,这个文件会用于后续的业务代码打包;

    • name 是dll暴露的对象名,要跟 output.library 保持一致;

    • context 是解析包路径的上下文,这个要跟接下来配置的 webpack.config.js 一致。

    运行Webpack,会输出两个文件一个是打包好的 lib.js,一个就是 manifest.json,它里面的内容大概是这样的:

    {
        "name": "vendor_ac51ba426d4f259b8b18",
        "content": {
            "./node_modules/react/react.js": 1,
            "./node_modules/react/lib/React.js": 2,
            "./node_modules/react/node_modules/object-assign/index.js": 3,
            "./node_modules/react/lib/ReactChildren.js": 4,
            "./node_modules/react/lib/PooledClass.js": 5,
            "./node_modules/react/lib/reactProdInvariant.js": 6,
            // ............
        }
    }

    接下来我们就可以快乐地打包业务代码啦,首先写好打包配置文件 webpack.config.js

    const webpack = require('webpack');
    module.exports = {
        output: {
            path: 'build',
            filename: '[name].js',
        },
        entry: {
            app: './src/index.js',
        },
        plugins: [
            new webpack.DllReferencePlugin({
                context: __dirname,
                manifest: require('./manifest.json'),
            }),
        ],
    };

    webpack.DllReferencePlugin 的选项中:

    • context 需要跟之前保持一致,这个用来指导 Webpack 匹配 manifest 中库的路径;

    • manifest 用来引入刚才输出的 manifest.json 文件。

    DllPlugin 本质上的做法和我们手动分离这些第三方库是一样的,但是对于包极多的应用来说,自动化明显加快了生产效率。


    PS:

    其实还有一个速度的优化点,就是配置babel,让它排除一些文件,当loader这些文件时不进行转换,自动跳过;可在.babelrc文件中配置,示例:

    {
        "presets": [
            "es2015"
        ],
        "ignore":[
            "jquery.js",
            "jquery.min.js",
            "angular.js",
            "angular.min.js",
            "bootstrap.js",
            "bootstrap.min.js"
        ]
    }
    展开全文
  • 怎样解决用到特殊字体的页面因为要加载庞大的字体库导致加载问题  在微信H5活动页面里, 为了增强活动的表现力或视觉效果,经常会出现设计师在页面中使用特殊字体库的情况,,如果页面没有复杂的交互,直接将...

    怎样解决用到特殊字体的页面因为要加载庞大的字体库导致加载慢的问题

      在微信H5活动页面里, 为了增强活动的表现力或视觉效果,经常会出现设计师在页面中使用特殊字体库的情况,,如果页面没有复杂的交互,直接将含有特殊字体的片段切成图片就能解决这个问题,但有些场景下是不能这样做的,比如说图片是根据用户的输入合成的,这样图片就需要动态生成。

      很自然就会想到,只要在这个页面上加载相应的TTF字体库,就能随意在页面上使用这种字体,但是,汉字的数量是非常多的,字体库体积非常大,少则十几M,多至几十M,如果在一个H5页面加载这么大的文件,对于用户体验(和用户的流量套餐^_^)来说简直就是灾难,那这种情况下怎么办呢?

      我后来想到的解决方案是:利用生成图片验证码的技术,将前端需要生成特殊字体的内容发送到后端,在后端读取特殊字体库并生成图片返回给前端就能解决这个问题,比如说,要将用户输入的称谓或祝福语变成某种特殊字体显示时,在前端页面留一个输入框收集内容,并且在keyup事件里将输入框的内容获取出来并发给服务端,服务端页面负责读取字体库内容,找出对应的文字并且合成图片并以二进制的格式输出,前端就使用一个标签接收输出就能在前端几乎同步地显示了,这个方案能避免前端去加载庞大的字体库,用户体验更好。

      你们有其它更好的实现方案吗?欢迎留言交流..

    以下附上后端的参考代码:
    入口 页

    $text = \tools\Tools::getChar('text');
    //计算字符中出现的中英文和数字分别的数量,精确计算宽度
    preg_match_all("/[0-9]{1}/", $text, $arrNum);
    preg_match_all("/[a-zA-Z]{1}/", $text, $arrAl);
    preg_match_all('/([\x{4e00}-\x{9fa5}]){1}/u', $text, $arrCh);
    $numberCount = count($arrNum[0]);
    $wordCount = count($arrAl[0]);
    $chineseWordCount = count($arrCh[0]);
    $othersCount = mb_strlen($text) - $numberCount - $wordCount - $chineseWordCount;
    $width = ($chineseWordCount+$othersCount)*90 + ($numberCount)*48 + $wordCount*55;
    $height = 130;
    $top = ($chineseWordCount)*5 + $wordCount*6 + $othersCount*40;
    $left = 90;
    if($wordCount > 0 || $numberCount > 0){
        //$left = 50;
    }
    $font = [
        'width' => $width,
        'height' => $height,
        'top' => $top,
        'left' => $left,
        'size' => 60,
        'font' => dirname(__FILE__).'/../font/fangzhenglibian1.ttf',
        'text' => $text
    ];
    $mode = \tools\Tools::getChar('mode');
    switch($mode) {
        case 1:
            $font['color'] = [51, 51, 51];
            break;
        case 2:
            $font['color'] = [248, 225, 155];
            break;
        case 3:
            $font['color'] = [51, 51, 51];
            $font['width'] = $width;
            break;
    }
    \tools\Tools::getTextImg($font);

    生成图片的方法

    /**
    * 根据文字打印图片
    * @param $font 要生成特殊字体图片的文本
    * @param $zoom 放大倍数
    */
    public static function getTextImg($font, $zoom = 1) {
        header('Content-Type: image/png');
        $im = imagecreatetruecolor($font['width'] * $zoom, (isset($font['height'])?$font['height']:30) * $zoom);
        $transparent = imagecolorallocatealpha($im, 255, 255, 255, 127);
        imagecolortransparent($im, $transparent);
        imagesavealpha($im, true);
        $black = imagecolorallocate($im, $font['color'][0], $font['color'][1],$font['color'][2]);
        imagefill($im, 0, 0, $transparent);
        imagettftext($im, $font['size'] * $zoom, 0, $font['top'] * $zoom, $font['left'] * $zoom, $black, $font['font'], $font['text']);
        $arr = ['祝您:', '愿你:'];
        $font['text'] = str_replace($arr, "", $font['text']);
        $arr1 = ['请接受', '新春的祝愿,'];
        $font['text'] = str_replace($arr1, "\t\t\t", $font['text']);
        imagettftext($im, $font['size'] * $zoom, 0, ($font['top'] * $zoom)+3, $font['left'] * $zoom, $black, $font['font'], $font['text']);
        imagepng($im);
        imagedestroy($im);
    }
    展开全文
  • 作为一只老鸟,折腾了两晚,装了2次系统, 终于排查定位出问题,其中过程颇为复杂,直接出结果: 原因:磁盘文件系统有问题。 方法:进入命令行,在怀疑的分区下,比如J:, 执行如下命令 J:> chkdsk /F 修复...

    作为一只老鸟,折腾了两晚,装了2次系统, 终于排查定位出问题,其中过程颇为复杂,直接出结果:

    原因:磁盘文件系统有问题

    方法:进入命令行,在怀疑的分区下,比如J:, 执行如下命令

    J:> chkdsk /F

    修复完成后,windows就能继续加载。

    个案细述:

    我这个问题,是因为第2块机械sata盘,有个分区,文件变多,估计里面的文件系统或参数什么有错乱导致windows10启动一直要检查,但它又不会自己修复,导致每次要搞好多时间。建议微软对这个问题进行优化。

     

    附:过程中,还遇到一个问题,windows不能安装在此磁盘,磁盘分区为GPT格式

    当时参考了此链接 https://blog.csdn.net/qq_38789531/article/details/82770404,

    还是不能解决,后先在第2块sata盘上装了ubuntu, 拷贝出第一块ssd盘的数据,再做无担忧尝试,

    发现,只有把ssd盘上的分区全部删除,windows10就能继续安装了,这又是一个坑。

    不知是不是因为我之前想重装,删除了C盘系统分区造成。

     

    总结,如果知道是磁盘文件参数问题,我也不用费尽周折,装了好几次系统了,希望能帮到大家!

     

     

     

    展开全文
  • 解决IIS服务器访问速度变慢问题

    万次阅读 2018-06-06 09:51:20
    当我以为一切已经解决了的时候,过了几天,网站打开速度变了。 服务器变卡,可能的原因是服务器的资源被占用太多, 总结: 一个服务器存放过多网站还是不太好的,幸好服务器里存放的大多都是公司门户,平时访问...

    最近发现公司网站变打开速度奇慢,登陆了远程桌面也是卡得飞起,于是我找个时间重启了一次服务器,结果网站加载速度变回正常。当我以为一切已经解决了的时候,过了几天,网站打开速度还是变慢了。
    服务器变卡,意味着服务器的资源被占用太多,有可能是网络请求多服务器处理能力有限,或者是网络请求不多但是网站一直占用服务器大部分资源没有释放。
    这次的问题是第二种,由于服务器存放同时多个网站,而网站的资源没有得到适时的释放导致这次的问题。解决方法:适时回收资源
    进入到iis的应用程序池界面,选择高级设置,我们可以看到iis默认的回收时间间隔是1740分钟(29小时),我们可以设置特定时间回收资源,一般设置在访问人数少的夜深时分。
    这里写图片描述
    总结:
    通过设置了回收资源时间,近几天服务器运行正常。一个服务器存放过多网站还是不太好的,幸好服务器里存放的大多都是公司门户,平时访问人数不多,业务简单,可以通过适时回收资源达到来减轻服务器负担的。平时访问人数多,业务复杂的须要单独存放或者根据需求请专门人士来架构以及运维服务器。

    展开全文
  • 解决Android Studio编译问题

    千次阅读 2019-02-13 13:13:33
    Dalvik 可执行文件分包配置会大幅增加构建处理时间,因为构建系统必须就哪些类必须包括在主 DEX 文件中以及哪些类可以包括在辅助 DEX 文件中作出复杂的决策。这意味着使用 Dalvik 可执行文件分包的增量式构建通常...
  • 缺点还是没解决后台接口返回数据问题。而且就算分页,一页展示的数据量还是很多、表格复杂的时候还是卡顿。你可能会说一页展示尽可能少的数据,但是如果实际情况是最少展示100条数据,这种方法就不行。 4. 无限...
  • 解决办法非常简单、实用,不麻烦,针对小白使用。(博主自己就是一个小白,匿……)如果您不想看整篇的话,请看摘要。精华都在摘要了,正文是比较详细的内容和吐槽自己找到解决方法的过程。摘要下载一个软件:...
  • 最近有工程师提出问题,零件中带有比较复杂的阵列特征,在使用SOLIDWORKS编辑修改特征的时候,操作会非常的卡,而且该零件保存后,文件大小也会非常大。针对这一类带有复杂阵列特征的零件,建议大家做如下操作: 1....
  • 突然发现,intellij idea 特别卡,在代码间移动的时候,居然刷新都跟不上,...然后,就是解决呗。 方法一:升级idea。 去官网下载,升级到2017.2.5。(没用) 方法二:超频 本人的CPU不行,AMD A6 9500 R5 ,...
  • 但是这么简单地过程中,遇见大量数据加载时,问题就变得复杂起来了。 产生的现象 首次加载时间过,友好性和体验性极差; 筛选条件,如默认1个小时,筛选24小时以上的数据时,加载数据过; 折线图拖动时,data
  • 关于Simulink仿真解决方案

    千次阅读 2020-12-25 23:23:24
    模型太复杂时会导致Simulink仿真步长特别小,从而导致仿真特别,而调整固定步长变大又会导致仿真崩溃 解决方案: 在Plant的反馈后面加了个Unit Delay 注意:具体机理未知,仅作笔记记录,而且我的问题应该不是出...
  • ansible太慢解决

    万次阅读 2016-08-09 10:07:05
    最近在推进ansible用于配置管理与自动部署,其中一个很困扰的问题是创建ssh通道很,虽然ansible在同一个task里面是并行的控制多台受控端.但是每一个task都需要和受控端创建ssh通道,非常影响效率.今天决定把它解决了....
  • mysql查询解决方法

    千次阅读 2016-07-29 14:59:00
    实际问题描述在做后台数据统计的时候,需要统计用户的已回答数、未回答数、...主要解决方法是表连接字段加索引,经分析,sql语句的复杂之处主要在于问题表和回答表需要多次表连接,(连接条件:question.id=answer.que
  • 完美解决github下载速度

    千次阅读 2020-03-06 17:19:18
    当你想在github网站里面下载一个仓库时,可能会比较,下面...仓库没有依赖其他子模块(submodule)时操作比较简单,有submodule时稍复杂,详细方法看这个大佬的博客,除了解决submodule的问题,还提到了下载githu...
  • Github访问慢解决办法

    千次阅读 多人点赞 2021-04-21 20:36:53
    找到对应的IP地址 最好用命令行Ping一下 ...然后依次找出下面的地址(我找到的) 如果嫌麻烦可以直接复杂粘贴 都在国内 区别不大 http://github.com 140.82.113.3 http://gist.github.com 140.82.113.3 h
  • Https请求解决办法

    千次阅读 2020-03-09 14:26:01
    2.解决heeps连接无法复用的问题: 基于TCP长连接,从移动端建立一条长连接到服务器。TCP是基于socket编程的,难度较大且复杂,需要自己定制协议。但是更新和消息推送会更加及时。而且访问量爆发时,可以减轻服务器...
  • mysql视图查询慢解决方法

    万次阅读 2019-01-17 10:39:08
    执行下面语句发现查询数据非常,要30多s: ...(其中Vsyslog 是视图)这个查询很,一开始搞不懂为什么,后来发现message 是在视图里面经过复杂运算得到的。 原因解释:因为Vsyslog 查出的每...
  • 但是如果每个Fragment很复杂,Fragment中的数据加载又很好时,这就会出现问题。 因为每次调用replace的时候,新的Fragment需要重新初始化,重新加载数据,屏幕会出现加载等待或白色闪屏。这样的用户体验很不好。 如...
  • 华为荣耀路由Pro 上网慢解决方法

    万次阅读 2017-08-15 22:08:41
    如果你使用荣耀路由Pro,发现家里100Mbps的网络编程了100kbps,请不要惊讶,八成是因为你家周围的wifi太过于复杂了。 我因为这个事情都要骂娘...将wifi 设置,中的如下内容修改了就可以解决大部分的wifi上网问题
  • Apache服务器访问过分析及解决

    万次阅读 2017-08-04 18:45:49
    起因:线上的一台服务器,最近总是出现 访问 很的情况发生,点击一个链接要2秒钟以上才能打开,按照我们对于访问人数的估计,服务器应该不至于响应这么,从而需要针对这个问题进行分析,来解决网站访问过。...
  • NetworkX是一个用Python语言开发的图论与复杂网络建模工具,内置了常用的图与复杂网络分析算法,可以方便的进行复杂网络数据分析、仿真建模等工作。我已经用了它一段时间了,感觉还不错(除了速度有点),下面介绍...
  • jQuery EasyUI Datagrid 加载慢解决方法

    千次阅读 2018-08-18 18:11:57
    jQuery EasyUI的Datagrid组件功能算是很强大了,不过性能确实不怎么乐观,而对于性能问题,网络上几乎也找不到相关的优化资料,所谓的牛人们可能都望而却步了。本博客以后会带着分析Datagrid组件的性能问题,并且给...
  • HTTP的原因和解决方式

    万次阅读 2018-03-12 13:36:25
    HTTP/1.0主要的问题在于连接无法复用和head of line blocking.1)连接无法复用,导致每次请求经历3次握手和启动。3次握手在高延迟的场景下影响较为明显,启动则对文件类大请求影响较大2)head of line blocking...
  •  很多人在使用虚拟机系统的时候... 本文是本专题的第二篇文章,上一篇文章请戳这里《vmware虚拟机运行速度卡原因分析及解决办法大全(一)》 6、分辨率  显示性能也是影响虚拟机速度的重要因素,在不影响工作的...
  • 一旦网络变时,面对复杂的网络环境,网管技术人员需要迅速并且准确的诊断出问题所在,并且加以解决。本文中,我将尽量描述网络变卡变的常见原因以及诊断方法。大体来说,网络卡顿的原因有如下方面:外网原因:...
  • mysql如何获取SQL,以及查询的解决方式

    万次阅读 多人点赞 2019-02-07 21:00:00
    26.使用基于游标的方法或临时表方法之前,应先寻找基于集的解决方案来解决问题,基于集的方法通常更有效。  27.与临时表一样,游标并不是不可使用。对小型数据集使用 FAST_FORWARD 游标通常要优于其他逐行处理方法...
  • 谈谈程序员解决问题的能力

    万次阅读 多人点赞 2017-03-25 12:36:47
    谈谈程序员解决问题的能力 解决问题的能力,程序员立业之本。 一般写文章我不会特意去写,而是有感而发的时候刚好又有时间我就会去写写文字。本想推些技术文章的,但写技术文章又很耗时,写得太浅显又没有技术含量...
  • 居然要周末加班才解决这个问题

    千次阅读 2019-10-30 22:10:55
    摘要 万万没想到,最近的一个...虽然这个任务可能你不会遇到特别相似的,但是我还是想把问题解决过程分享给大家,顺便聊聊如何解决技术问题问题背景 需要将一个开源的python项目接入到公司的微服务体系(主要是...
  • 数据库正常运行,突然变解决思路>数据库正常运行,突然变解决思路: 1、查看数据库版本(select * from v$version) 2、查看操作系统的进程(top,ps -ef) 3、查看操作系统的IO情况(sar 1 10) 4、...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 297,206
精华内容 118,882
关键字:

复杂问题解决慢