前端工程化探索学习之模块打包工具webpack(3)

目录

一、谈谈另一本有趣的书-《定位》

1.1  这本书是讲什么的？

1.2 定位的核心和背景是什么？

1.3 如何更好的定位或者说营销的思考

1.4  营销准则之一:不要企图改变人类的心智

1.5  有趣的营销捷径推论

二、上阶段完成的需求和未完成的需求 

---

一、谈谈另一本有趣的书-《定位》

1.1  这本书是讲什么的？

         书的标题是定位，还以为是讲比如人生定位之类的思考。但是封面又标注了:有史以来对美国营销最大的概念。这时候就觉得应该是一本讲营销理念的书，开篇总章则描述为一种新的传播沟通的方法，称为定位。以广告学为主要形式，提炼出方法论为主的理念和思考。一句话来概括这本书的内容，就是从另一个角度阐述了信息传递到信息被接受的过程，怎样在众多广告中取得直击内心的实现品牌效应。

1.2 定位的核心和背景是什么？

      书中定位的概念从产品的角度开始，可以是商品，可以是团队，可以公司理念，可以是服务理念。这本书的核心定位围绕着顾客的心智，如何让产品在客户的心智中与众不同。脱离环境和背景来得出方法论或者是理念都是没有意义的，因为任何的道理和理论在适合的环境下都可以成立。核心“定位”理念的背景是，互联网环境下，信息爆炸时代下，信息不易被接受的大背景。

     确实有着同样的感受，咱们可以联网，可以看到大量的信息。但是实际上，又感觉这庞大的信息中，很难筛选出有价值的信息。同时庞大的商品同质化功能的选择下，实际决定我们最后决定买什么商品，大部分情况下是心智中映像最深的那样物品。然后不假思索的购买。这也是品牌溢价的原因之一，因为即使同等商品，同等用途，在我们的心智中就是根深蒂固的倾向某个品牌。那么在本能上，我们就会拒绝接受很多同类型的信息和选择。

1.3 如何更好的定位或者说营销的思考

      如果在这之气问我什么品牌的营销非常棒，第一时间想到的是苹果。因为苹果在乔布斯时代下，充当着时尚潮流的引领者的角色。而无数手机厂商，大多都是在揣摩客户的想法，跟随着当前的潮流，来推出产品。因为这样风险更小。那如果从苹果营销出发，营销是引领潮流，成为先行者，引爆热点而非追逐热点。

      书中对营销阐述的观点则是，并非创造新的理念和概念。而是找到顾客心智中早已存在的认知。提出的基本方法是，并非创造新的不同的事物，而是操控顾客中已经存在的认知，但是要重组已经存在的关联认知。提出人的心智是海量传播的防御物，自动屏蔽和排斥了大量的信息。

1.4  营销准则之一:不要企图改变人类的心智

      24小时内，我们在不断的接收信息，但是心智就像海绵一样，只有把已存的信息挤掉，才能有空间接受新的信息。源源不断的把信息塞进已经饱和的海绵中。唯一的防御力量就是简化的心智。

      简化的心智表现来说，人们的心智更倾向于接受与其以前知识和经验相匹配的信息。人们可以可以忍受别人对他们说自己之前一无所知的事，但是不能容忍别人说他的想法是错误的。原因就是因为自身的防卫力量。

1.5  有趣的营销捷径推论

 (1)简单、纯粹到无需思考就能懂:  如果对于营销产品的概念有疑惑，通往营销成功的捷径就是看看竞争品牌在做什么。然后去掉其中的诗意或者创意。用简单纯粹的信息描述，反而能够更加接近顾客的心智。

 (2)创造顾客期待创造的奇迹：我们看到的东西，更多的是我们想要看到的。购买和选择并非理性而更多的时候是感性。因此广告的首要目标是提高人的期望值，造成一种奇迹或者人们期待的未来的感受。即该产品或者服务会产生顾客期待的奇迹，然后奇迹就出现了。

(3)关联最强: 客户心智中可以允许存在的同质化产品最高看作三个。成不了市场占有率的那个，就成为用户认知中，和最深刻认知关联度很深的那个。那么也可以占据顾客宝贵的三个心智之一。

(4)小众的狂欢到大众的共舞:，明确一部分较小受众的客户群，但是这部分客户群在其它客户群看来，是某种美好品质的化身。以小众带动大众。比如活力或者怀旧，时尚。

三、Tree Shaking

3.1 Tree Shaking是什么

     Tree-shaking 最早是 Rollup 中推出的一个特性，2.0之后推出这个特性。在Webpack 生产模式打包的优化过程中，就使用自动开启这个功能，以此来检测我们代码中的未引用代码，然后自动移除它们。

// 例子
export const Button = () => {
  return document.createElement('button')
  console.log('dead-code');//不会被打包
}

3.2 Tree Shaking的作用

   去除冗余代码是生产环境优化中一个很重要的工作，Webpack 的 Tree-shaking 功能就很好地实现了这一点。在生产环境下是自动开启的。所以在使用一些比如Loadash、Echart工具库的时候，可以大胆引入，只有被使用到的函数才会被打包进bundle,但是没有用到的部分就会成为冗余代码。

   所以TreeShaking的核心作用是用来移除未引用的代码。

3.3 什么时候Tree Shaking会生效

   Tree-shaking 实现的前提是 ES Modules，重要的事情说三遍。最终交给 Webpack 打包的代码，必须是使用 ES Modules 的方式来组织的模块化。

    部分loader比如babel会将模块化从ES Modules转换到CommonJS的方式打包。因此会造成Tree shaking失效。

    部分Babel 版本的预设配置是默认设置处理ESModule的模块转换成CommonJS的方式打包，这种情况下，包体积就会相比去除未使用成员后的代码要大很多。在最新版本（8.x）的 babel-loader 中，已经自动帮我们关闭了对 ES Modules 转换的插件。因此在8以下版本中，需要注意配置。

  module: {
    rules: [
      {
        test: /\.js$/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: [
              ['@babel/preset-env', { modules: 'commonjs' }]
            ]
          }
        }
      }
    ]
  },

    一旦使用如上配置，就会导致Tree Shaking失效。因此需要将modules属性设置为false.

四、sideEffects

4.1 sideEffects的作用

    官方描述是说允许我们通过配置标识我们的代码是否有副作用，从而提供更大的压缩空间。

是在Webpack 4 之后增加的新特性。

    和TreeShaking的作用类似，但是是针对的两种不一样的情况。Treeshaking针对的是未使用的成员，而sideEffects针对的是，副作用成员。

    网上看过类似这样一段描述:"Tree-shaking 只能移除没有用到的代码成员，而想要完整移除没有用到的模块，那就需要开启 sideEffects 特性了"

 4.2 什么时候需要开启sideEffects

     确认当前模块代码的副作用，是只针对相当模块的。没有涉及到全局功能的部分。所以开启sideEffects模块需要谨慎。

    一般情况下只对自己编写的模块文件，开启对应的

module.exports = {
  mode: 'none',
  entry: './src/main.js',
  output: {
    filename: 'bundle.js'
  },
  optimization: {
    sideEffects: true
  }
}

   但是对于外部引用库文件，在不了解内部副作用是否和全局有关的时候，都是最好不要开启。不然的话出问题，都不好排查