* Optimising wasm so it doesn't break Chrome

* Simpler dockerfile (thanks surma!)
This commit is contained in:
Jake Archibald
2019-06-19 12:24:24 +01:00
committed by GitHub
parent fbaa282f07
commit b6fae0eb4c
4 changed files with 9 additions and 16 deletions

View File

@@ -1,7 +1,8 @@
FROM ubuntu
RUN apt-get update && \
apt-get install -qqy git build-essential cmake python2.7
RUN git clone --recursive https://github.com/WebAssembly/wabt /usr/src/wabt
RUN git clone --depth 1 --recursive https://github.com/WebAssembly/wabt /usr/src/wabt
RUN mkdir -p /usr/src/wabt/build
WORKDIR /usr/src/wabt/build
RUN cmake .. -DCMAKE_INSTALL_PREFIX=/opt/wabt && \
@@ -14,5 +15,7 @@ RUN rustup install nightly && \
cargo install wasm-pack
COPY --from=0 /opt/wabt /opt/wabt
ENV PATH="/opt/wabt/bin:${PATH}"
RUN mkdir /opt/binaryen && \
curl -L https://github.com/WebAssembly/binaryen/releases/download/1.38.32/binaryen-1.38.32-x86-linux.tar.gz | tar -xzf - -C /opt/binaryen --strip 1
ENV PATH="/opt/binaryen:/opt/wabt/bin:${PATH}"
WORKDIR /src

View File

@@ -9,6 +9,9 @@ echo "============================================="
rustup run nightly \
wasm-pack build --target no-modules
wasm-strip pkg/squooshhqx_bg.wasm
echo "Optimising WASM so it doesn't break Chrome (this takes like 10-15mins. get a cup of tea)"
echo "Once https://bugs.chromium.org/p/chromium/issues/detail?id=97480 is fixed, we can remove this step"
wasm-opt -Os --no-validation -o pkg/squooshhqx_bg.wasm pkg/squooshhqx_bg.wasm
rm pkg/.gitignore
)
echo "============================================="

Binary file not shown.

View File

@@ -24,19 +24,6 @@ interface State {
const sizePresets = [0.25, 0.3333, 0.5, 1, 2, 3, 4];
/**
* Should we allow the user to select hqx? Chrome currently has a wasm bug, so we currently avoid it
* there, unless overridden.
* crbug.com/974804
*/
const allowHqx: boolean = (() => {
const url = new URL(location.href);
return url.searchParams.has('allow-hqx')
// Yep. UA sniffing. Let's hope we can remove this soon.
// Block browsers with Chrome/, unless they also have Edge/ (since the Edge UA includes Chrome/)
|| !navigator.userAgent.includes('Chrome/') || navigator.userAgent.includes('Edge/');
})();
export default class ResizerOptions extends Component<Props, State> {
state: State = {
maintainAspect: true,
@@ -163,7 +150,7 @@ export default class ResizerOptions extends Component<Props, State> {
<option value="mitchell">Mitchell</option>
<option value="catrom">Catmull-Rom</option>
<option value="triangle">Triangle (bilinear)</option>
{allowHqx && <option value="hqx">hqx (pixel art)</option>}
<option value="hqx">hqx (pixel art)</option>
<option value="browser-pixelated">Browser pixelated</option>
<option value="browser-low">Browser low quality</option>
<option value="browser-medium">Browser medium quality</option>